2017-03-08 64 views
0

我正在使用引导列表组面板类,我希望子项目在单击父项时显示,但它们保持隐藏状态。 这是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 --> 

`

+0

'data-toggle'切换由它的'data-target'属性选择的元素。你没有这个。 – TricksfortheWeb

回答

0

列表组是不理想的这个问题。

改为使用Bootstrap的Collapse。它正是你想要......你甚至可以把一个列表组在那里,如果你想:)

看一看什么: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()