使用 jquery 将 ul 直接放在打开的类下

Question

我有以下 jquery：

    // Code for Side Navigation
    $("#sideNav ul li:not(:has(li.current))")
   .find("ul").hide().end() // Hide all other ULs
   .hoverIntent(
        function(){
            $(this).children('ul').slideDown('fast');
        },
        function(){
         //  $(this).children('ul').slideUp('fast');
        }
    );

它上下滑动导航，使 current 类的任何 li 保持打开状态。 我想更改它，以便如果 li 有一个类 current，则直接位于其下方的 ul 也将打开，但低于该级别的其他类将保持关闭状态。

HTML 结构如下：

<ul>
    <li>Category 1
        <ul>
            <li class="current">Currently Open
                <ul>
                    <li>Sub Cat 1 - should show
                        <ul><li>Should not Show</li></ul>
                    </li>
                    <li>Sub Cat 2 - should show</li> 
            </li>
        </ul>
    </li>
    <li> Category 2
        <ul><li>Should not Show></li></ul>
    </li>
</ul>

Answer 1

首先，您需要修复您的 html。第二个嵌套 UL 未关闭。第二个是将当前路径中的所有 LI 元素分配给 .current 类。

<ul>
<li class="current">Category 1
    <ul>
        <li class="current">Currently Open
            <ul>
                <li>Sub Cat 1 - should show
                    <ul><li>Should not Show</li></ul>
                </li>
                <li>Sub Cat 2 - should show</li> 
            </ul>
        </li>
    </ul>
</li>
<li> Category 2
    <ul><li>Should not Show</li></ul>
</li>

然后使用这个 css

    li.current>ul{
    display : block;
}

li ul{
    display : none;
}

应该可以解决您的问题，而无需使用 javascript。这就是你所寻求的吗？

如果您需要添加悬停效果，您所需要做的就是将 .current 类添加到悬停的 li 中。

我添加了一些鼓舞人心的 jquery 代码（尚未测试），应该对您有帮助：

    $('li:has(ul)').bind('mousein',function(){
    $(this).find('ul').slideDown();
});
$('li:has(ul)').bind('mouseout',function(){
    $(this).find('ul').slideUp();
});

Answer 2

弄清楚：

添加

$("#sideNav ul li.topCurrent").find("ul").show();
$("#sideNav ul li.topCurrent").find("ul li:not(:has(li.current)) ul").hide();

到 jquery 代码的底部。