jQuery показать и ввести div при наведении - PullRequest
0 голосов
/ 27 мая 2019

Есть ответы на вопрос, как отображать div при наведении курсора на другой div, но в моем примере мне нужно навести курсор на тег привязки, который показывает список элементов строки меню, и после этого навести указатель мыши на него. список пунктов меню. После этого, когда я наведите курсор мыши на введенный список, список должен скрыться. Проблема в том, что когда я выхожу из списка строк меню, он не исчезает.

Я пытался сделать это при наведении курсора на js-expand, чтобы показать js-am-content, и когда mouseout над menu-bar-item, чтобы скрыть содержимое, если menu-bar-item не наведено, но содержимое не скрывается.

Это мой упрощенный HTML

<div>
  <a class="expand js-expand fa fa-bars"></a>
  <div class="action-menu-content js-am-content">
    <a class="menu-bar-item"> SHOW </a>
    <a class="menu-bar-item"> EDIT </a>
    <a class="menu-bar-item"> COLLECTIVE </a>
    <a class="menu-bar-item"> PER ORDER </a>
    <a class="menu-bar-item"> CUSTOMS </a>
    <a class="menu-bar-item"> HISTORY </a>
  </div>
</div>

и jQuery (кофейный скрипт)

$(document).on 'mouseover', '.js-expand', (event) =>
  $parent = $(event.currentTarget).parent()
  $parent.children(".js-am-content").slideToggle('fast')

$(document).on 'mouseout', '.menu-bar-item', (event) =>
  if !$('.menu-bar-item:hover') 
    $('.js-am-content').fadeOut('fast')

Ответы [ 2 ]

1 голос
/ 27 мая 2019

Если возможно добавить обработчик событий к родителю <div>, попробуйте это.

$(".parentdiv").hover(
    function(event) {
      $(event.currentTarget).children(".js-am-content").fadeIn("fast");
    }, function(event) {
      $(event.currentTarget).children(".js-am-content").fadeOut("fast");
    }
  );

Если вы не можете добавить обработчик к родителю, дайте мне знать, и я попробую кое-чтоеще.

PS: Извините, это не сценарий с кофе.

1 голос
/ 27 мая 2019

Почему бы вам просто не попробовать это:

 $(document).on 'mouseout', '.menu-bar-item', (event) =>
    $('.js-am-content').fadeOut('fast');

Я имею в виду, почему мы должны проверять "item: hover", когда мы уже делаем событие mouseout для родителя

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...