Question

我正在使用bootstrap list-group面板类，我希望在单击父项时显示subItems，但它们会保持隐藏状态。这是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

列表组不适合此问题。

使用Bootstrap代替折叠。它完全符合您的要求..如果您需要，您甚至可以在其中放置一个列表组：）

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

Bootstrap列表组面板未展开

1 个答案: