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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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