jQuery的動態顯示/隱藏導航與同位素

Question

我建立了我的文檔中的同位素項目使用動態過濾導航欄。我的導航中有幾個不同的類別，每個類別都有相關的子類別。我正在嘗試構建一個主要類別在加載時顯示的導航。

在負載我還填充所有以隨機順序的元素的DOM。當你點擊一個分類鏈接時，它會過濾掉結果，並組織相關的元素。我也想顯示過濾部分的相關子類別。然後，如果你選擇一個不同的類別，現有subnav淡出，相對資產淨值子在變淡。

我排序的所有的一切都相對於同位素的偉大工程。它的智能顯示/隱藏的subnav我很難與。

我的HTML：

<nav id="filters"> 
    <div id="categories"> 
    <h2>Select a Category:</h2> 
    <br> 
    <li><a href="#" data-filter="*">All Categories</a></li> 
    <li><a href="#" data-filter=".autos" data-category="autos">Autos</a></li> 
    <li><a href="#" data-filter=".lifestyle" data-category="lifestyle">Lifestyle</a></li> 
    <li><a href="#" data-filter=".people" data-category="people">People</a></li> 
    <li><a href="#" data-filter=".tech" data-category="tech">Tech</a></li> 
    <li><a href="#" data-filter=".trends" data-category="trends">Trends</a></li> 
    <br> 
    </div> 
    <div id="autos"> 
    <h2>Autos:</h2> 
    <li><a href="#" data-filter=".autos" data-category="autos">Show All</a></li> 
    <li><a href="#" data-filter=".news" data-category="autos">News</a></li> 
    <li><a href="#" data-filter=".car-tech" data-category="autos">Car Tech</a></li> 
    <li><a href="#" data-filter=".fuel-economy-and-safety" data-category="autos">Fuel Economy &amp; Safety</a></li> 
    <li><a href="#" data-filter=".buying-and-selling" data-category="autos">Buying &amp; Selling</a></li> 
    <li><a href="#" data-filter=".autos, .everything-else" data-category="autos">Everything Else</a></li> 
    <br> 
    </div> 
    <div id="lifestyle"> 
    <h2>Lifestyle:</h2> 
    <li><a href="#" data-filter=".lifestyle" data-category="lifestyle">Show All</a></li> 
    <li><a href="#" data-filter=".travel" data-category="lifestyle">Travel</a></li> 
    <li><a href="#" data-filter=".music" data-category="lifestyle">Music</a></li> 
    <li><a href="#" data-filter=".food" data-category="lifestyle">Food</a></li> 
    <li><a href="#" data-filter=".shopping" data-category="lifestyle">Shopping</a></li> 
    <li><a href="#" data-filter=".lifestyle, .everything-else" data-category="lifestyle">Everything Else</a></li> 
    <br> 
    </div> 
    <div id="people"> 
    <h2>People:</h2> 
    <li><a href="#" data-filter=".people" data-category="people">Show All</a></li> 
    <li><a href="#" data-filter=".who-you-know" data-category="people">Who You Know</a></li> 
    <li><a href="#" data-filter=".who-you-should-know" data-category="people">Who You Should Know</a></li> 
    <li><a href="#" data-filter=".people, .everyone-else" data-category="people">Everyone Else</a></li> 
    <br> 
    </div> 
    <div id="tech"> 
    <h2>Tech:</h2> 
    <li><a href="#" data-filter=".tech" data-category="tech">Show All</a></li> 
    <li><a href="#" data-filter=".business" data-category="tech">Business</a></li> 
    <li><a href="#" data-filter=".pleasure" data-category="tech">Pleasure</a></li> 
    <li><a href="#" data-filter=".tech, .everything-else" data-category="tech">Everything Else</a></li> 
    <br> 
    </div> 
    <div id="trends"> 
    <h2>Trends:</h2> 
    <li><a href="#" data-filter=".trends" data-category="trends">Show All</a></li> 
    <li><a href="#" data-filter=".online" data-category="trends">Online</a></li> 
    <li><a href="#" data-filter=".offline" data-category="trends">Offline</a></li> 
    <li><a href="#" data-filter=".trends, .everything-else" data-category="trends">Everything Else</a></li> 
    </div> 
</nav> 

我的jQuery：

$(document).ready(function() { 

    $('#filters > div:gt(0)').hide(); 

    $('#filters a').click(function(){ 
    var selector = $(this).attr('data-filter'); 
    var category = $(this).attr('data-category'); 
    var $subnav = $('#filters').find('#'+category); 

    if($subnav.is(":hidden")) { 
     $subnav.fadeIn(); 
    } 

    if($subnav.is(":visible") && $subnav.attr("id") != category) { 

    } 

    $container.isotope({ filter: selector }); 
    return false; 
    }); 
}); 

我願意接受任何建議。無論是重組我的導航，還是以新的方式重新渲染我的變量。我一直在盯着這塊代碼一段時間，大腦正在變成糊狀。我試圖使用第二個if聲明來處理非相對subnav的隱藏。

如果你喜歡，你可以使用例如在顯示躍過我的網站：

EXAMPLE

Answer 1

好吧，我想通了。沒有更改HTML。我的繼承人更新的JavaScript/jQuery的

$(document).ready(function() { 

    $('#filters > div:gt(0)').hide(); 

    $('#filters a').click(function(){ 
    var selector = $(this).attr('data-filter'); 
    var category = $(this).attr('data-category'); 
    var $subnav = $('#filters #'+category); 

    $('#filters > div').each(function() { 
     if($(this).attr('id') != category) { 
     $(this).not('#categories').fadeOut(); 
     } 
    }) 

    if($subnav.attr("id") === category) { 
     $subnav.delay(1000).fadeIn(); 
    } 

    $container.isotope({ filter: selector }); 
    return false; 
    }); 
});