自舉列表組面板不擴展

我正在使用引導列表組面板類，我希望子項目在單擊父項時顯示，但它們保持隱藏狀態。這是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 -->

來源

2017-03-08 Rafael Duarte

'data-toggle'切換由它的'data-target'屬性選擇的元素。你沒有這個。 – TricksfortheWeb

列表組是不理想的這個問題。

改爲使用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()

來源

2017-03-09 00:31:10 Frenchmassacre

自舉列表組面板不擴展

回答

相關問題