1

Всем привет. Есть выпадающее меню со структурой Родитель > Ребенок уровень-1 > Ребенок уровень-2. Блоки-подменю не являются его непосредственными потомками (соседние дивы):

<div class="menu">ul,li</div> <div class="sub-menu-1">ul,li</div><div class="sub-menu-2">ul,li</div>

Показ подменю 1 уровня происходит при клике на соответствующий пункт меню-родителя, поэтому описать событие не представляет трудностей

$('.menu li').click(...)

Проблема состоит в том, что меню 2 уровня должно показываться при ховере на соответствующий элемент первого подменю. Я никак не могу правильно подобрать события, с которыми показ-скрытие подменю-2 происходит адекватно. Всем заранее спасибо за ответы.

2
  • родитель:hover + соседний_элемент {display: block;} соседний_элемент:hover {display: block;}
    – Yuri
    26 мар 2017 в 10:51
  • 1
    Покажите рабочий пример меню
    – Yuri
    26 мар 2017 в 10:59

1 ответ 1

0

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

$('.menu li, .submenu').hover(function() {
  // определяем подменю
  var $menu = $(this)
  if (!$(this).hasClass("submenu")) {
    $menu = $('.' + $(this).data("sub"))
  }
  // ставим флаг "в фокусе"
  $menu.data('infocus', 1 );
  // показываем активное подменю
  $menu.show().siblings('.submenu').hide();
  
}, function() {

 // определяем подменю
  var $menu = $(this)
  if (!$(this).hasClass("submenu")) {
    $menu = $('.' + $(this).data("sub"))
  }
  // ставим флаг "не в фокусе"
  $menu.data('infocus', 0);
  // скрываем активное подменю, с небольшой задержкой
  setTimeout(function() {
    if ($menu.data('infocus') == 0) $menu.hide();
  }, 10)

})
.menu {
  width: 100px;
  float: left;
  padding: 0;
  margin: 0;
   background:#eee;
}

.submenu {
  display: none;
  float: left;
  background:#ccc;
  padding:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class=menu>
  <li data-sub="submenu1">submenu1</li>
  <li data-sub="submenu2">submenu2</li>
</ul>

<div class="submenu submenu1">submenu1</div>
<div class="submenu submenu2">submenu2</div>

Ваш ответ

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

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