jquery - Bootstrap Accordion 不会折叠之前显示的 div

Question

我有以下正在做 Accordion 的代码片段。单击后它会折叠并隐藏。但是，当当前折叠一个并单击另一个时，第一个折叠的 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>

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

Answer 1

更新 fiddle -> 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"  

正在让它按照您的预期工作。