Question

我有来自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>

这对我来说似乎不起作用，有人能指出我做错了什么吗？或者他们能为这种方法提供更好的解决方案吗？

Answer 1

.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");
        });

    }
});

Answer 2

试试这样的事情：

$('li > ul').each(function(){
  $(this).parent().addClass("your class");
});

这将选择所有作为li子女的uls并将该课程应用于尊重他人。

Answer 3

.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');
});

Answer 4

你的问题中还有一个额外的</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");
    });

}
});

如果列表项有子列表，请添加css样式

4 个答案: