Я имею навигацию от ul, см. Ниже:
<nav>
<ul>
<li><a href="#">Top Link 1</a></li>
<li><a href="#">Top Link 2</a></li>
<ul>
<li><a href="#" >Sub Link 1</a></li>
<li><a href="#">Sub Link 2</a></li>
<li><a href="#">Sub Link 3</a></li>
</ul>
</li>
<li><a href="#">Top Link 3</a></li>
<ul>
<li><a href="#" >Sub Link 1</a></li>
<li><a href="#">Sub Link 2</a></li>
<li><a href="#">Sub Link 3</a></li>
</ul>
</li>
</ul>
</nav>
У меня есть мой css, который скрывает ссылку "ul", если не зависает родительский "li". (Не покажут, если не спросят, поскольку это не проблемы)
Я пытаюсь использовать JQuery, чтобы добавить стиль css (margin-bottom: 30px;) на верхний уровень "li", только если у него есть дочерний "ul", вложенный в него. Мой JQuery выглядит следующим образом:
<script>
$(document).ajaxSuccess(function () {
if ($("nav ul >li").children("ul li")) {
$("nav ul >li").hover(function () {
$("nav ul >li").css("margin-bottom", "30");
});
}
});
</script>
Кажется, это не работает для меня, может кто-нибудь указать, что я делаю неправильно? Или они могут обеспечить лучшее решение этого подхода?
Попробуйте немного что-то вроде этого:
$('li > ul').each(function(){
$(this).parent().addClass("your class");
});
Это выберет все uls, которые являются дочерними элементами li, и примените класс к уважаемому li.
.children
всегда возвращают массив, проверьте .length
$(document).ajaxSuccess(function () {
if ($("nav ul >li").children("ul li").length > 0) {
$("nav ul >li").hover(function () {
$("nav ul >li").css("margin-bottom", "30");
});
}
});
у вас есть дополнительный </li>
в вашем вопросе, который, я думаю, является опечаткой.
<li><a href="#">Top Link 2</a></li>
//-------^^^^^here
<ul>
<li><a href="#" >Sub Link 1</a></li>
в любом случае вы проверяете чек на длину детей, если они есть..
попробуй это
$(document).ajaxSuccess(function () {
if ($("nav ul >li").children().length > 0) {
$("nav ul >li").hover(function () {
$(this).css("margin-bottom", "30");
});
}
});
.children()
возвращает объект, а объект является правдивым значением в JavaScript, кроме того, если условие оценивается как true, вы добавляете слушателя ко всем элементам li
не только к тем, у которых есть ul
дети, вы можете использовать .has()
который является методом фильтрации:
$("nav > ul > li").has('ul').on({
mouseenter: function() {
$(this).css("margin-bottom", "30px");
},
mouseleave: function() {
$(this).css("margin-bottom", "n");
}
});
Или:
li.hovered {
margin-bottom: 30px;
}
$("nav > ul > li").has('ul').on('mouseenter mouseleave', function(e){
$(this).toggleClass('hovered', e.type === 'mouseenter');
});