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

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

    }
});