0

展開トグルをサポートするナビゲーションを作成しようとしています。

表示したい 2 つの子ナビゲーション アイテムを取得しましたが、最初の 1 つしか表示されず、両方のアイテムが表示されます。同じIDの各アイテムを表示するにはどうすればよいですか?

    <ul>
      <li> <a href="#nav1" class="nav-toggle">Example <span class="nav-plus"></span></a>
      <li id="nav1" style="display:none;"><div class="orange-bar"></div><a href="page1.php">Navigation 1</a></li>
      <li id="nav1" style="display:none;"><div class="orange-bar"></div><a href="page2.php">Navigation 2</a></li>
    </ul>


    <script>
    $(document).ready(function() {
      $('.nav-toggle').click(function(){
        var collapse_content_selector = $(this).attr('href');                   
        var toggle_switch = $(this);

        $(collapse_content_selector).toggle(function(){
          if($(this).css('display')=='none'){
            toggle_switch.html('Example <span class="nav-plus"></span>');
          }else{
            toggle_switch.html('Example <span class="nav-minus"></span>');
          }
        });
        return false;
      });

    }); 
    </script>

これはナビゲーションの単なる例です。複数の展開ナビゲーション項目があります。

4

1 に答える 1

1

主な問題は、一意でない方法で ID を使用していることです。ID は一意であることを意味します。代わりにクラスを使用してください。

<ul>
    <li> <a href=".nav1" class="nav-toggle">Example <span class="nav-plus"></span></a></li>
    <li class="nav1" style="display:none;"><div class="orange-bar"></div><a href="page1.php">Navigation 1</a></li>
    <li class="nav1" style="display:none;"><div class="orange-bar"></div><a href="page2.php">Navigation 2</a></li>
</ul>

href を ".nav1" に変更し、後続の li タグの ID をクラスに変更したことに注意してください。これにより、両方のアイテムが表示されます。証明については、この jsfiddleを参照してください。

また、最初の li の終了タグが抜けていたので、それも修正しました。

これで問題は解決しますが、少し複雑に感じます。href 属性を使用して他の要素の ID やクラスを参照するのは、少し変わっています。次のような別のアプローチを検討することをお勧めします。

  $('.nav-toggle').click(function(){
    var collapse_content_selector = $(this).closest('ul').find('.nav1');                   
    var toggle_switch = $(this);

    $(collapse_content_selector).toggle(function(){
      if($(this).css('display')=='none'){
        toggle_switch.html('Example <span class="nav-plus"></span>');
      }else{
        toggle_switch.html('Example <span class="nav-minus"></span>');
      }
    });
    return false;
  });

href を使用して後続の li タグを見つける代わりに、親の ul を見つけてから、クラス「nav1」を持つすべての li タグを探していることに注意してください。これを実現する方法はたくさんありますが、おそらくこれがよりクリーンなアプローチであることがわかるでしょう。実際の例については、この jsfiddleを参照してください。

于 2013-06-14T00:59:06.157 に答える