別のレベルのメニューを追加するHTML/Boostrap 3/JS

Question

ページ下部のHTMLからこのメニュー構造に別のレベルを追加するにはどうすればよいですか？

現在

私が何をしようとしている

Test 

--->a 
--->b 

Test 

    --->a 
      --->1 
      --->2 
    --->b 
      --->1 
      --->2 

HTML私はあなただけのユニークで別の崩壊要素を作成する必要があると考えてい

<li class="nav-header"> 
    <a data-target="#menu5" data-toggle="collapse" href="#"> 
    <h3>test</h3></a> 
    <ul class="list-unstyled collapse" id="menu5"> 
     <li> 
      <a href="#"><i class="glyphicon glyphicon-circle"></i> Facebook</a> 
     </li> 
     <li> 
      <a href="#"><i class="glyphicon glyphicon-circle"></i> Twitter</a> 
     </li> 
    </ul> 
</li> 

Answer 1

<ul> 
    <li class="nav-header"> 
       <a data-target="#menu5" data-toggle="collapse" href="#"> 
       <h3>test</h3></a> 
       <ul class="list-unstyled collapse" id="menu5"> 
        <li> 
         <a data-target="#submenu" data-toggle="collapse" href="#"><i class="glyphicon glyphicon-circle"></i> Facebook</a> 
         <ul class="list-unstyled collapse" id="submenu"> 
          <li> 1 </li> 
          <li> 2</li> 
         </ul> 
        </li> 
        <li> 
         <a href="#"><i class="glyphicon glyphicon-circle"></i> Twitter</a> 
        </li> 
       </ul> 
    </li> 
</ul> 

イド。トグルとして<a>要素を使用します。