アイテムをドロップダウンした簡単なサイド・ナビゲーションを作成するには

Question

私はいくつかのサブアイテムを持つ単純なサイド・ナビゲを作成しようとしています。私はそれをする方法を考え出したと思うが、これが最善の方法であるかどうかは分からない。

<ul> 
<li>Item 1</li> 
<li class="dropdown">Item 2 
    <ul class="hidden"> 
    <li>Item 2 - subitem1</li> 
    <li>Item 2 - subitem2</li> 
    </ul> 
</li> 
<li>Item 3</li> 
<li class="dropdown">Item 4 
    <ul class="hidden"> 
    <li>Item 4 - subitem1</li> 
    <li>Item 4 - subitem2</li> 
    <li>Item 4 - subitem3</li> 
    </ul> 
</li> 
<li>Item 5</li> 

<style> 
    ul.hidden { 
    display:none; 
    } 
</style> 

<script> 
    $(function() { 
    $('.dropdown').click(function(){ 
    $('.hidden').hide(); 
    $(this).find('.hidden').toggle(); 
    }); 
    }); 
</script> 

Answer 1

ご希望の場合は、CSSでこれを行うことができます - .hidden上：アクション表示：ブロック;

あなたのJSは、現在、cssによって隠されているものを隠しています。そして、.hidden（2つあります）のすべてのインスタンスを検索します。各ドロップダウンをトグルするにはforeachループが必要です。メニューを再表示するには、リリース機能も必要です。

ブートストラップは、正しい方向への素敵な歩みを与えるかもしれないし、ちょうどこのためにCSSを使うかもしれない。

http://www.w3schools.com/howto/howto_css_dropdown.asp

https://codepen.io/philhoyt/pen/ujHzd