特定類上的jQuery toggleClass

Question

我已經創建了這個jQuery代碼來切換類來打開和關閉。 但是當我在儀表板導航點擊它也影響了其他類

Here is my sample code.

的JavaScript：

$(document).ready(function(){ 
    $('ul.nav li a#mainnav').click(function(){ 
     $('ul.nav li ul').toggleClass('opened'); 
    }); 
}); 

CSS：

div#wrapper div#main_sidebar ul.nav li ul.closed{ 
    height: 0; 
    overflow: hidden; 
} 
div#wrapper div#main_sidebar ul.nav li ul.opened{ 
    height: auto; 
} 

HTML：

<div id="main_wrapper"> 
    <div id="wrapper"> 
     <div id="main_sidebar"> 
      <ul class="nav"> 
       <li> 
        <a id="mainnav">Dashboard</a> 
        <ul class="closed opened"> 
         <li><a href="#">Menu Manager</a></li> 
         <li><a href="#">Script Pages</a></li> 
         <li><a href="#">Plugin Manager</a></li> 
         <li><a href="#">User Manager</a></li> 
        </ul> 
       </li> 
       <li> 
        <a id="mainnav">Settings</a> 
        <ul class="closed"> 
         <li><a href="#">Post settings</a></li> 
         <li><a href="#">User settings</a></li> 
         <li><a href="#">Permalink Structure</a></li> 
        </ul> 
       </li> 
       <li> 
        <a>Edit</a> 
        <ul id="main_nav" class="closed"> 
         <li><a href="#">Edit Posts</a></li> 
         <li><a href="#">Edit Pages</a></li> 
         <li><a href="#">Edit Links</a></li> 
         <li><a href="#">Edit Menu Items</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 

Answer 1

爲了只觸發特定的列表，使用next()或siblings("ul")：

$("#mainnav").click(function() { 
    $(this).next().toggleClass("opened"); 
});​ 

DEMO：http://jsfiddle.net/efAZU/10/

Answer 2

在點擊mainNav，你切換所有的人都與你的選擇，而不是嘗試一些像這樣在你的click功能：

$(this).siblings('ul').toggleClass('opened'); 

如果你想要的幻燈片效果，您可以改用slideToggle()。