崩壊で崩壊しても動作しません

Question

私はブートストラップの専門家ではありませんが、私はここで少し機能しない別の崩壊の中で崩壊しています。

シンプルな崩壊がうまく機能している：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<li> 
 
    <a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-sitemap"></i> Vos sites <i class="fa fa-fw fa-caret-down"></i></a> 
 
    <ul id="demo" class="collapse"> 
 
    <li> 
 
     <a href="/main">Level 1</a> 
 
    </li> 
 
    </ul> 
 
</li>

そしてそれは、この与える：

をしかし、私は別のレベルを追加するために同じことを行いますこの崩壊木。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<li> 
 
    <a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-sitemap"></i> Vos sites <i class="fa fa-fw fa-caret-down"></i></a> 
 
    <ul id="demo" class="collapse"> 
 
    <li> 
 
     <a href="/main">Level 1</a> 
 
    </li> 
 
    <li> 
 
     <a href="javascript:;" data-toggle="collapse" data-target="#demo_2"><i class="fa fa-fw fa-sitemap"></i> Level 2 <i class="fa fa-fw fa-caret-down"></i></a> 
 
     <ul id="demo_2" class="collapse"> 
 
     <li> 
 
      <a href="/main"> sublevel1</a> 
 
     </li> 
 
     <li> 
 
      <a href="/main"> sublevel2</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</li>

そして不気味それは、これを提供します！

私はLEVEL1としてサブレベルのために同じ表示を持っていない理由を誰かが私に言うことはできますか？

COMPLETE

私はここでブートストラップ3

Answer 1

を使用していますが、それが期待どおりに動作します見ることができるようにのみブートストラップ3
と実施例である：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 
<ul> 
 
<li> 
 
    <a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-sitemap"></i> Vos sites <i class="fa fa-fw fa-caret-down"></i></a> 
 
    <ul id="demo" class="collapse"> 
 
     <li> 
 
      <a href="/main">Level 1</a> 
 
     </li> 
 
     <li> 
 
      <a href="javascript:;" data-toggle="collapse" data-target="#demo_2"><i class="fa fa-fw fa-sitemap"></i> Level 2 <i class="fa fa-fw fa-caret-down"></i></a> 
 
      <ul id="demo_2" class="collapse"> 
 
       <li> 
 
        <a href="/main"> sublevel1</a> 
 
       </li> 
 
       <li> 
 
        <a href="/main"> sublevel2</a> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</li> 
 

 
</ul>

あなたの例の色は、そこにいくつかの余分なCSSファイルを使用していることを示しています。