Правильный вывод дочернего меню (jQuery)

261
23 ноября 2017, 02:14

Здравствуйте, в общем нужно чтобы дочернее меню выводилось при ховере на ссылку, а не на элемент li, проблема в том что дочернее меню является дочерним для li а не для a и поэтому при попытке допустим выборку сделать не через .children() а .next() при потере .hover у a дочернее меню схлопывается, как добиться, чтобы такое происходило только при наведении на ссылку вне дочернего меню? Надеюсь понятно объяснил. Пример:

$(".product-categories > li > a").hover(function() { 
  var child = $(this).next('.children'); 
  if ($(child).css('display') === 'none') { 
    $(child).slideDown("fast", function() {}); 
  } else { 
    $(child).slideUp("fast", function() {}); 
  } 
});
.children{ 
  display: none; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="product-categories"> 
  <li> 
    <a>Девочки 
      </a> 
    <ul class="children"> 
      <li> 
        <a>Красивые 
        </a> 
        <ul> 
          <li><a>Люба</a></li> 
          <li><a>Зинаида</a></li> 
          <li><a>Валентина Васильевна</a></li> 
        </ul> 
      </li> 
      <li> 
        <a>Страшные 
        </a> 
      </li> 
    </ul> 
  </li> 
  <li> 
    <a>Мальчики 
      </a> 
  </li> 
  <li> 
    <a>Дети 
      </a> 
  </li> 
</ul>

Немного подправил пример, щас думаю станет понятно, навожу на "Девочки" > раскрывается меню, убираю фокус на элементы подменю> схлопывается - такого не должно происходить.

Answer 1

Оно? 

let cat = '.product-categories > li > a'; 
 
$(cat).hover(function() { 
  let child = $(this).next('.children');   
   
  if ($(child).css('display') === 'none') { 
    $(cat).next('.children').slideUp("fast"); 
    $(child).slideDown("fast"); 
  } 
});
.children { 
  display: none; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="product-categories"> 
  <li> 
    <a>Девочки 
      </a> 
      <ul class="children"> 
        <li> 
          <a>Красивые 
          </a> 
          <ul> 
            <li><a>Люба</a></li> 
            <li><a>Зинаида</a></li> 
            <li><a>Валентина Васильевна</a></li> 
          </ul> 
        </li> 
        <li> 
          <a>Страшные 
          </a> 
        </li> 
      </ul> 
  </li> 
  <li> 
    <a>Мальчики 
      </a> 
      <ul class="children"> 
        <li> 
          <a>Дрищёвые 
          </a> 
          <ul> 
            <li><a>Леопольд</a></li> 
            <li><a>Владлен</a></li> 
            <li><a>Матвей</a></li> 
          </ul> 
        </li> 
        <li> 
          <a>Страшные 
          </a> 
        </li> 
      </ul> 
  </li> 
  <li> 
    <a>Дети 
      </a> 
  </li> 
</ul>

READ ALSO
Как сделать подвижные окна
HTML

Как сделать подвижные окна

Как сделать подвижные окна как в этом видео https://wwwyoutube

 256
Не работает слайдер JavaScript
HTML

Не работает слайдер JavaScript

Всем привет, вообщем практикуюсь на JavaScript, дело дошло до слайдера, и тут заминкаДелаю вот такой вот контейнер:

 275
У SVG скошенная линия
HTML

У SVG скошенная линия

 281
Выравнивание полями margin
CSS

Выравнивание полями margin

Подскажите почему свойство margin не выравнивает список ul по вертикали Поле справа слева добавляет, верх низ не выравнивает http://cssdeckcom/labs/5en

 227