Здравствуйте, в общем нужно чтобы дочернее меню выводилось при ховере на ссылку, а не на элемент 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>
Немного подправил пример, щас думаю станет понятно, навожу на "Девочки" > раскрывается меню, убираю фокус на элементы подменю> схлопывается - такого не должно происходить.
a
у первого пункта, далее раскрывается подменю, после того как я навожу мышкой наa
у подменю - подменю схлопывается, мне нужно чтобы это происходило только если я навожу наa
другого пункта, либо вообще убираю фокус с меню.next()
написатьchildren()
, но мне это не подходит