Jquery點擊事件（用於列表項）堆棧

Question

所以在嘗試各種方法（如if語句和刪除類）之後，我終於放棄了。我不能想到一個優雅的解決方案來修復我的代碼。

當我點擊不同的列表項目時，事件不會重置。相反，它以某種方式積累。這裏發生了什麼？

$(document).ready(function() { 
$(".home").click(function() { 
$(this).toggleClass("item-active"); 
$(".block-1").toggleClass("blocks"); 
$(".b1").toggleClass("blockss"); 
    $(".content").toggleClass("content-removed"); 
}); 
$(".products").click(function() { 
$(this).toggleClass("item-active"); 
$(".block-2").toggleClass("blocks"); 
$(".b2").toggleClass("blockss"); 
    $(".content").toggleClass("content-removed"); 
});}); 

http://jsfiddle.net/bk38w/87/

我做了一個的jsfiddle和複製的代碼存在。你可以在那裏看到問題。

我將不勝感激洞察力。

Answer 1

我清理了您的代碼，只使用一種方法，而不是爲每個菜單分別設置類。清潔劑htmlcssjs，也使用較少的類。

說到CSS，你應該考慮下面這個。它曾經是.blockss，現在你只需要改變的.b1項目的CSS，如果他們的父母有.blocks

DEMO

希望這有助於和你明白它在做什麼。其實你可以甚至清理你的HTML多一點，即你可以刪除<div class="b1">，並設置在<a>的.b1類，並使其display: block;但這只是如果你真的想清理:)

.blocks .b1 { 
    display:inline-block; 
} 

HTML

<nav> 
    <ul> 
     <li> <a href="#" class="trigger" data-id="home">Home</a> 
     </li> 
     <li> <a href="#" class="trigger" data-id="products">Products</a> 
     </li> 
    </ul> 
    <div data-sub-id="home" class="block"> 
     <div class="b1"><a href="#">Link 1</a> 
     </div> 
     <div class="b1"><a href="#">Link 2</a> 
     </div> 
     <div class="b1"><a href="#">Link 3</a> 
     </div> 
    </div> 
    <div data-sub-id="products" class="block"> 
     <div class="b1"><a href="#">Link 1</a> 
     </div> 
     <div class="b1"><a href="#">Link 2</a> 
     </div> 
     <div class="b1"><a href="#">Link 4</a> 
     </div> 
     <div class="b1"><a href="#">Link 5</a> 
     </div> 
    </div> 
</nav> 

JS

$(".trigger").click(function() { 
    var $this = $(this), 
     ul = $this.parents('ul'), 
     dataId = $this.data('id'), 
     subMenu = $this.parents('nav').find('[data-sub-id="' + dataId + '"]'), 
     subMenus = $this.parents('nav').find('.block'); 

    //remove classes from all items 
    ul.find('li a').each(function() { 
     $(this).removeClass('item-active'); 
    }); 

    subMenus.each(function() { 
     $(this).removeClass('blocks');  
    }); 

    //add classes to this item 
    $this.addClass('item-active'); 
    subMenu.addClass('blocks'); 
});