直接保持UL一类开放下使用jQuery

Question

我有以下位O”的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有一个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

图出来：

新增

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

至底部jQuery代码。

Answer 2

首先，你需要修复您的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(); 
});