0

ドキュメント内のアイソトープ項目で使用する動的フィルタリング ナビゲーション バーを構築しています。ナビにはいくつかの異なるカテゴリがあり、それぞれに相対的なサブカテゴリがあります。読み込み時にメイン カテゴリが表示されるナビゲーションを構築しようとしています。

読み込み時に、すべての要素をランダムな順序で DOM に入力します。カテゴリ リンクをクリックすると、結果が除外され、関連する要素が整理されます。また、フィルター処理されたセクションに関連するサブカテゴリも表示したいと考えています。その後、別のカテゴリを選択すると、既存のサブナビゲーションがフェードアウトし、関連するサブナビゲーションがフェードインします。

同位体に関連するすべてのソートとすべてがうまく機能します。私が苦労しているサブナビのインテリジェントな表示/非表示です。

私の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非相対サブナビの非表示を処理するために、2 番目のステートメントを使用しようとしていました。

必要に応じて、表示されている例を使用して私のサイトに移動できます。

例

4

1 に答える 1

0

さて、私はそれを理解しました。HTML に変更はありません。Heres 私の更新された 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;
  });
});
于 2012-12-07T19:35:54.130 に答える