0

私はこれで少しプッシュする必要があります、私はほとんどそこにいます。

ナビゲーション バーがあり、そのアイテムをクリックするとドロップダウンが表示されます。アイテムをクリックするとドロップダウンが適切に折りたたまれますが、同じアイテムをクリックしてドロップダウンを折りたたむと、ドロップダウンがスライドして戻ってから再び下にスライドします。

このデモを CodePen で作成しました- (このデモは、動作するスクリプトで更新したため、現在動作しています。以下の私の回答を参照してください)。

これは私が使用している基本的な HTML 構造です。

<ul class="dd-container fll">
  <li><a href="#">Link 1</a>
    <ul class="dropdown second-level-nav">
      <li><a href="#">SubLink 1</a></li>
      <li><a href="#">SubLink 2</a></li>
      <li><a href="#">SubLink 3</a></li>
    </ul>
  </li>
  <li><a href="#">Link 2</a>
    <ul class="dropdown second-level-nav">
      <li><a href="#">SubLink 1</a></li>
      <li><a href="#">SubLink 2</a></li>
      <li><a href="#">SubLink 3</a></li>
    </ul>
  </li>
  <li><a href="#">Link 3</a>
    <ul class="dropdown second-level-nav">
      <li><a href="#">SubLink 1</a></li>
      <li><a href="#">SubLink 2</a></li>
      <li><a href="#">SubLink 3</a></li>
    </ul>
  </li>
</ul>

<ul class="dd-container flr">
  <li><a href="#">Login</a></li>
  <li><a href="#">Cart</a>
    <ul class="dropdown second-level-nav">
      <li><a href="#">SubLink 1</a></li>
      <li><a href="#">SubLink 2</a></li>
      <li><a href="#">SubLink 3</a></li>
    </ul>
  </li>
</ul>

そして、これは私が使用しているスクリプトです:

//Nav bar dropdowns
$('.dd-container li').click(function(){     
    //Remove class .active from any other <li> and hide any other dropdown that's visible
    $(this).parents().find('.active').removeClass('active').find('.dropdown').slideUp();
    //Toggle class .active
    $(this).toggleClass('active');
    //Slide up/down the actual dropdown     
    $(this).find('.dropdown').stop(true, true).slideToggle();
});

これについてご協力いただきありがとうございます。

4

2 に答える 2

0

うーん、思ったよりも少し手間がかかりましたが、やっと解決しました。

以下の happybuddha と Jeevan の提案はオプションではありませんでした。アイテムのクラスを切り替えて、ユーザーがアイテムがアクティブ/選択されていることを明確に視覚的に示すことができるようにする必要があったためです。基本的に使いやすさのため。

CodePenデモは現在動作中です。

作業スクリプトは次のとおりです (これがこのスクリプトを作成する最適な方法かどうかはわかりませんが、うまく機能します)。

//Nav bar dropdowns
var dropdown = '.dropdown';
$('.dd-container > li').click(function(){
  //Hide any other dropdown that's visible
  $(this).siblings().find(dropdown).slideUp();
  //Hide Cart dropdown
  $(this).parents('.dd-container').siblings().find(dropdown).slideUp();     
  //Toggle class .active
  $(this).toggleClass('active');
  //Remove class .active from any other <li>
  $(this).parents().find('.active').not(this).removeClass('active');
  //Slide up/down the actual dropdown       
  $(this).find(dropdown).stop(true, true).slideToggle();        
});

視覚的な比較のために、動作していなかった古いスクリプトを次に示します。

//Nav bar dropdowns
$('.dd-container li').click(function(){     
    //Remove class .active from any other <li> and hide any other dropdown that's visible
    $(this).parents().find('.active').removeClass('active').find('.dropdown').slideUp();
    //Toggle class .active
    $(this).toggleClass('active');
    //Slide up/down the actual dropdown     
    $(this).find('.dropdown').stop(true, true).slideToggle();
});

これが将来誰かに役立つことを願っています。

ありがとう。

于 2013-08-14T18:03:17.367 に答える