2

Пытаюсь сделать следующее:

при клике на div с id="cd-login-trigger-in" показывать список и при клике на него же, скрыть этот список, а также скрывать при клике в любой области экрана. Но сейчас при повторном клике на div, список не скрывается, не понимаю почему. Также не пойму, как можно совместно с этим кодом реализовать тоже самое, только плюс и при наведении, и убирании курсора на div - показывать и скрывать список, т.е. допустим, если навели просто курсором без клика на div, показать список, как увели курсор - скрыть div, а, если кликнули на div, то показать список и не скрывать его, когда даже курсор будет уведен с div, только лишь по клику в не области скрыть. Я так понимаю дублировать код для mousemove и mouseout?

$('#cd-login-trigger-in').click(function() {
    $('#cd-login-trigger-in').toggleClass('visible');
    $('.my-profil').fadeIn();
});
$(document).mouseup(function (e) {
    var container = $(".my-profil");
    if (e.target!=container[0]&&!container.has(e.target).length){
        container.fadeOut();
        $('#cd-login-trigger-in').removeClass('visible');
    }
});
.my-profil{
  display:none;
}
#cd-login-trigger-in .js-a{
   color:#000;
}
#cd-login-trigger-in.visible .js-a{
    color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cd-login-trigger-in">
    <a href="javascript:void(0)">
    <p class="js-a">Профиль</p></a>
    <ul class="my-profil">
        <li class="my-profil-item">
            <span>Мой профиль</span>        
        </li>
                                  
    </ul>
</div>

0

1 ответ 1

3

Добавляем переменную toggledByClick, которую меняем по клику и которая отвечает за то, чтобы блока не скрывался при отведении курсора.
Скрытие-отображение контейнера лучше вынести в отдельную функцию toggleContainer, если вы в дальнейшем надумаете поменять анимацию на другую, то вам не нужно будет делать кучу замен через ctrl+f.

var container = $(".my-profil");
var buttonWrapper = $('#cd-login-trigger-in');
var button = buttonWrapper.find('.js-a');
var toggledByClick = false;

button.click(function() {
  toggledByClick = !toggledByClick;
  toggleContainer(toggledByClick);
});
buttonWrapper.hover(function() {
  toggleContainer(true);
}, function() {
  if (!toggledByClick) {
    toggleContainer(false);
  }
});
$(document).mouseup(function(e) {
  if ( $(e.target).closest('#cd-login-trigger-in').size() === 0 && $(e.target).closest('.my-profil').size() === 0) {
    toggledByClick = false;
    toggleContainer(false);
  }
});
function toggleContainer(display) {
  if (display) {
    container.fadeIn();
  } else {
    container.fadeOut();
  }
  $('#cd-login-trigger-in').toggleClass('visible', display);
}
.my-profil {
  display: none;
}

#cd-login-trigger-in .js-a {
  color: #000;
}

#cd-login-trigger-in.visible .js-a {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cd-login-trigger-in">
  <a href="javascript:void(0)" class="js-a">
    <p>Профиль</p>
  </a>
  <ul class="my-profil">
    <li class="my-profil-item">
      <span>Мой профиль</span>
    </li>

  </ul>
</div>

6
  • работает с глюками 10 июн 2017 в 20:59
  • Добавил уточненную проверку для клика по document.
    – br3t
    10 июн 2017 в 21:13
  • Внес правки в код
    – br3t
    10 июн 2017 в 21:32
  • А теперь?. . . .
    – br3t
    10 июн 2017 в 21:41
  • Попробуйте поменять на .length . В сниппете работает, ошибка где-то у вас.
    – br3t
    10 июн 2017 в 21:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.