Question

假设我有这个

<li>
<a data-toggle="collapse">item 1</a>
</li>
<li>
<ul class="panel-collapse collapse">
<li>sub item 1</li>
<li>sub item 2</li>
</ul>
</li>
<li>
<a data-toggle="collapse">item 2</a>
</li>
<li>
<ul class="panel-collapse collapse">
<li>sub item 3</li>
<li>sub item 2</li>
</ul>
</li>

一开始，所有子项都已折叠。现在例如，当我点击第1项和第2项时，将扩展子项1,2,3,4。这已经实现了。现在我希望子项目1和2在子项目3,4扩展后崩溃。我如何存档？感谢。

Answer 1

以下是演示

＆＃13;

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-info">
        <div class="panel-heading " role="tab" id="headingOne">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#per" aria-expanded="true" aria-controls="collapseOne">
                    <strong>Link 1</strong>
                </a>
            </h4>
        </div>
        <!--To make by defualt open a any panel put class "in" (without quotes)-->
        <div id="per" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body" style="padding:0px">
                <ul class="list-group" style="margin-bottom: 0px;">
                 <li class="list-group-item">Link 1</li>
                  <li class="list-group-item">Link 1</li>
                  <li class="list-group-item">Link 1</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading" role="tab" id="headingTwo">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#family" aria-expanded="false" aria-controls="collapseTwo">
                   <strong>Link 2</strong>
                </a>
            </h4>
        </div>
        <div id="family" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body" style="padding:0px">
<ul class="list-group"style=" margin-bottom: 0px;">
                       <li class="list-group-item">Link 2</li>
                  <li class="list-group-item">Link 2</li>
                  <li class="list-group-item">Link 2</li>
</ul>
            </div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading" role="tab" id="headingThree">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#social" aria-expanded="false" aria-controls="collapseThree">
                     <strong>Link 3</strong>
                </a>
            </h4>
        </div>
        <div id="social" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="panel-body" style="padding:0px">
<ul class="list-group" style=" margin-bottom: 0px;">
                      <li class="list-group-item">Link 3</li>
                  <li class="list-group-item">Link 3</li>
                  <li class="list-group-item">Link 3</li>
</ul>
            </div>
        </div>
    </div>
</div>

＆＃13;

Answer 2

假设在折叠时，css类collapse已从<ul>/<ul>元素的类列表中删除，并且您在此项目中使用jQuery。

$('[data-toggle="collapse"]').click(function(){
  if($(this:contains('item 2') && $('ul:nth-child(1)').hasClass('collapse'))
   $('ul:nth-child(1)').toggleClass('collapse');
  else if($(this:contains('item 1') && $('ul:nth-child(2)').hasClass('collapse'))   
   $('ul:nth-child(2)').toggleClass('collapse');
});

Bootstrap - 当另一个<ul>展开时折叠一个<ul>

2 个答案: