直接保持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(); 
});