0

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

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

4

4 回答 4

0

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

}
});
于 2013-09-23T16:06:30.120 回答
0

.children()方法返回一个对象，并且一个对象在 JavaScript 中是一个真值，除了如果条件被评估为真，你正在为所有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');
});
于 2013-09-23T16:05:48.600 回答
0

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

    }
});
于 2013-09-23T16:02:47.077 回答
0

尝试一下这样的事情：

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

这将选择所有 li 的子级 ul，并将该类应用于受尊敬的 li。

于 2013-09-23T16:03:53.320 回答