ブートストラップリストグループパネルが展開されていません

Question

私はブートストラップリストグループパネルクラスを使用していますが、親アイテムをクリックしたときにサブアイテムが表示されるようにしたいのですが、 これは、htmlコードです： `

<div class="col-md-3"> <!-- START SIDE BAR --> 

    <div class="list-group"> <!-- START LIST GROUP --> 

      <a class="list-group-item" href="?page=users">      
       <i class="fa fa-plus"></i> Adicionar Episódio      
      </a>     

     <div id="MainMenu"> 

      <div class="list-group panel"><!-- START PANEL --> 


      <a href="#Game of Thrones" class="list-group-item" data-toggle="collapse" data-parent="#MainMenu">Game of Thrones</a> <!--Nome Série --> 

      <div class="collapse" id="#Game of Thrones"> <!-- START SEASONS DIV --> 

       <a href="#1" class="list-group-item" data-toggle="collapse" data-parent="#Game of Thrones">Temporada 1<i class="fa fa-caret-down"></i></a> <!-- NUMERO Temporada --> 

       <a href="#2" class="list-group-item" data-toggle="collapse" data-parent="#Game of Thrones">Temporada 2<i class="fa fa-caret-down"></i></a> <!-- NUMERO Temporada --> 

       <a href="#3" class="list-group-item" data-toggle="collapse" data-parent="#Game of Thrones">Temporada 3<i class="fa fa-caret-down"></i></a> <!-- NUMERO Temporada --> 

       <a href="#4" class="list-group-item" data-toggle="collapse" data-parent="#Game of Thrones">Temporada 4<i class="fa fa-caret-down"></i></a> <!-- NUMERO Temporada --> 


       <a href="#5" class="list-group-item" data-toggle="collapse" data-parent="#Game of Thrones">Temporada 5<i class="fa fa-caret-down"></i></a> <!-- NUMERO Temporada --> 


       <a href="#6" class="list-group-item" data-toggle="collapse" data-parent="#Game of Thrones">Temporada 6<i class="fa fa-caret-down"></i></a> <!-- NUMERO Temporada --> 

      </div> <!-- END SEASONS DIV --> 

      </div> <!-- END PANEL --> 

     </div> <!-- END MENU --> 



    </div> <!-- END LIST GROUP --> 

`

Answer 1

リストグループは、この問題のために理想的ではありません。

代わりにブートストラップの折りたたみを使用してください。あなたは:)

をしたい場合は正確に何をしたい...あなたも、そこにリストグループをそれを置くことができない見てください：Link

は、ここでブートストラップドキュメントからのコードの例です：

<div class="panel-group" role="tablist"> 
<div class="panel panel-default"> 
    <div class="panel-heading" role="tab" id="collapseListGroupHeading1"> 
     <h4 class="panel-title"> 
      <a href="#collapseListGroup1" class="" role="button" data-toggle="collapse" aria-expanded="true" aria-controls="collapseListGroup1"> Collapsible list group 
      </a> 
     </h4> 
    </div> 
    <div class="panel-collapse collapse in" role="tabpanel" id="collapseListGroup1" aria-labelledby="collapseListGroupHeading1" aria-expanded="true"> 
     <ul class="list-group"> 
      <li class="list-group-item">Bootply</li> 
      <li class="list-group-item">One itmus ac facilin</li> 
      <li class="list-group-item">Second eros</li> 
     </ul> 
    <div class="panel-footer">Footer</div> 
    </div> 
</div> 

$('.collapse').collapse()