引导列表组面板未展开答案

【问题标题】：Bootstrap list group panel not expanding引导列表组面板未展开
【发布时间】：2017-03-08 22:55:20
【问题描述】：

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

【问题讨论】：

data-toggle 切换由其data-target 属性选择的元素。你没有那个。

标签： html twitter-bootstrap

【解决方案1】：

列表组不适用于此问题。

改用 Bootstrap 的 Collapse。它完全符合您的要求。如果您愿意，您甚至可以在其中放置一个列表组:)

看看：Link

这是来自 Bootstraps Docs 的代码示例：

<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()

【讨论】：