Question

我有以下代码片段正在做手风琴。它一旦点击就会折叠和隐藏。但是，当一个当前折叠并且另一个将被单击时，第一个折叠的div将不会隐藏。相反，它也会崩溃下一个，导致两个崩溃的div。

<script src="../../S/Content/js/jquery-1.9.1.min.js"></script>

<script src="../../S/Content/js/bootstrap.min.js"></script>


<script src="../../S/Content/js/modernizr-2.6.2-respond-1.1.0.min.js"></script>


<link href="../../S/Content/stylesheets/_bootstrap.min.css" rel="stylesheet" />
<link href="../../S/Content/stylesheets/ui-custom-style.min.css" rel="stylesheet" />
<link href="../../S/Content/stylesheets/_ionicons.min.css" rel="stylesheet" /> 

        <div class="col-sm-8 badges-area">
            <div class="row badge-items" id="accordion">
                <div class="col-sm-4 badge-item" data-parent="#accordion" data-toggle="collapse" href="#badge-info-body">
                     <img src="../img/badge-sample.png"/>
                </div>
                 <div class="col-sm-4 badge-item" data-parent="#accordion" data-toggle="collapse" href="#try">
                     <img src="../img/badge-sample.png"/>
                </div>

                <div class="accordion-group">
                <div class="col-sm-11 badge-info arrow arrow-left panel-collapse collapse" id="badge-info-body" role="tabpanel" >
                   <div class="col-xs-4 col-sm-4">
                       <img src="../img/badge-sample.png"/>
                   </div>
                   <div class="col-xs-8 col-sm-8">                           
                       <p> This is for the first.
                        </p>  
                   </div>                    


               </div>
               <div class="col-sm-11 badge-info arrow arrow-middle panel-collapse collapse" id="try" role="tabpanel" >
                   <div class="col-xs-4 col-sm-4">
                       <img src="../img/badge-sample.png"/>
                   </div>
                   <div class="col-xs-8 col-sm-8">
                       <p> This is for the second.
                        </p>    
                   </div>                       
               </div>
                </div>

            </div>

        </div>

我可能在哪里出错？这是一个小提琴https://jsfiddle.net/DTcHh/23951/当我点击First Accordion时，它会崩溃，这没关系。当我点击第二个手风琴时，前一个手风琴没有关闭，但它又折叠了另一个手风琴。谢谢你的帮助。

Answer 1

<div class="col-md-12 col-lg-12">
<div class="panel panel-default">
    <div class="panel-heading" data-toggle="collapse" data-target="#searchDropdownsPanel">
        <h3 class="panel-title">
            Search filters
            <span id="glyphiconicons" class="glyphicon glyphicon-chevron-down pull-right">
            </span>
        </h3>
    </div><!--panel heading end -->
    <div id="searchDropdownsPanel" class="panel-collapse collapse in">
        <form {{action "search" on="submit"}}>
            <div class="panel-body">
                <div class="col-md-12 col-lg-12">
                    {{yield}}
                </div>
            </div>
            <div class="panel-footer text-right">
              <button id="searchFilterClearButton" {{action 'clear'}} type="button" class="btn btn-default">Clear</button>
              <button id="searchFilterSubmitButton" type="submit" class="btn btn-primary">Search</button>
            </div>
        </form>
    </div>
</div>

这是我使用的代码，没有能力尝试你的代码很难帮助。我和我的代码之间的区别在于我使用data-target =“＃searchDropdownsPanel”来指示哪个div必须折叠。

我希望这会有所帮助。

Answer 2

更新小提琴 - ＆gt; https://jsfiddle.net/sherin81/y37j8g62/

 <div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          First accordion
        </a>
      </h4>

    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <p> This is for the first.
      </p>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Second accordion
        </a>
      </h4>

    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <p> This is for the second.
      </p>
    </div>
  </div>
</div>

试试这个。

 data-parent="#accordion"

让它按预期工作。

Bootstrap手风琴不会崩溃之前显示的div

2 个答案: