jquery for li需要更新

Question

目前點擊菜單中的第三個li導致將類添加/刪除到導航欄中任何人都可以告訴我如何讓它點擊任何li將切換類添加到導航欄中

<nav id="site-navigation" class="main-navigation"> 
    <ul> 
    <li><a href="#content" >HOME</a></li> 
    <li><a href="#workstop" >SERVICES</a></li> 
    <li><a href="#test" >TESTIMONIALS</a></li> 
    </ul> 
</nav><!-- #site-navigation --> 

相關jQuery代碼：

$(document).ready(function(){ 

container = document.getElementById('site-navigation'); 
menuitem = container.getElementsByTagName('li')[2]; 
menuitem.onclick = function() { 
    if (-1 !== container.className.indexOf('toggled')) 
     container.className = container.className.replace(' toggled', ''); 
    else 
     container.className += ' toggled'; 
}; 

代碼作爲小提琴： http://jsfiddle.net/yKbFk/11/

Answer 1

當你使用jQuery已經使用.toggleClass()，你可以嘗試以下操作：

$(document).ready(function(){ 
    $(".main-navigation ul li").on("click",function(){ 
     $(this).closest("nav").toggleClass("toggled"); // toggle For nav as per question 
     //$("#site-navigation").toggleClass("toggled") // you can do this also 
    }); 
}) 

Answer 2

使用toggleClass：

$("#site-navigation li a").click(function() { 
    $(this).closest("nav").toggleClass("toggled"); 
}); 

此外，您的ID可以使用一些工作。對於nav元素使用站點導航的id和一類主導航有點冗餘。我也懷疑你根本不會重用這個類，只是想要覆蓋這兩個基地。

如何只：

<nav> 
    <ul> 
    <li><a href="#content" >HOME</a></li> 
    <li><a href="#workstop" >SERVICES</a></li> 
    <li><a href="#test" >TESTIMONIALS</a></li> 
    </ul> 
</nav> 

然後：

$(document).ready(function(){ 
    $("nav ul li ").click(function() { 
     $(this).closest("nav").toggleClass("toggled"); 
    }); 
});