javascript - Bootstrap Accordion 不会关闭所有列表项

Question

我在 bootstrap 中的 Accordion 列表有一个奇怪的问题。总是有一个列表项打开，所有的都没有关闭。如果一个打开并且我单击另一个列表打开，那么只有第一个会关闭。

但我希望它也能在切换时关闭。

知道我错过了什么吗？

这是我的 HTML

<div class="container width-fix">
        <div class="col-md-7 faq left-side">
         <h1>Frequently asked questions</h1>
            <h6>Click on questions to expand answers</h6>

                <div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
      <h4 class="panel-title active-panel" id="panel-title1">
          <span class="arrow"></span>
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis id nisi nec dapibus.:
        </a>

      </h4>

    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis id nisi nec dapibus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis id nisi nec dapibus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis id nisi nec dapibus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis id nisi nec dapibus.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
      <h4 class="panel-title" id="panel-title2" data-title="2" >
           <span class="arrow"></span>
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit?
        </a>

      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
          ANSWER ME! 
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
      <h4 class="panel-title" id="panel-title3" data-title="3">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Lorem ipsum dolor sit amet, coortis id nisi nec dapibus.?
        </a>
            <span class="arrow"></span>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        ANSWER ME TOO!
      </div>
    </div>
  </div>


  <div class="panel panel-default">
    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
      <h4 class="panel-title" id="panel-title4">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
         Lorem ipit. Sed lobortis id nisi nec dapibus.? 
        </a>
            <span class="arrow"></span>
      </h4>
    </div>
    <div id="collapseFour" class="panel-collapse collapse">
      <div class="panel-body">
        ANSWERS!
      </div>
    </div>
  </div>


  <div class="panel panel-default">
    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseFive">
      <h4 class="panel-title" id="panel-title5">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseFive">
         Lor adipiscing elit. Sed lobortis id nisi nec dapibus.?
        </a>
            <span class="arrow"></span>
      </h4>
    </div>
    <div id="collapseFive" class="panel-collapse collapse">
      <div class="panel-body">
        I WANT ANSWERS!
      </div>
    </div>
  </div>


   <div class="panel panel-default">
    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseSix">
      <h4 class="panel-title" id="panel-title2" data-title="2" >
           <span class="arrow"></span>
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseSix">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.?
        </a>

      </h4>
    </div>
    <div id="collapseSix" class="panel-collapse collapse">
      <div class="panel-body">
          ANSWER ME! 
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven">
      <h4 class="panel-title" id="panel-title3" data-title="3">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseSeven">
          Lorem ipsum dolor sit amet, consectetur .?
        </a>
            <span class="arrow"></span>
      </h4>
    </div>
    <div id="collapseSeven" class="panel-collapse collapse">
      <div class="panel-body">
        ANSWER ME TOO!
      </div>
    </div>
  </div>


  <div class="panel panel-default">
    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseEight">
      <h4 class="panel-title" id="panel-title4">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseEight">
         Lorem ipsum dolor sit amet, consectetur .? 
        </a>
            <span class="arrow"></span>
      </h4>
    </div>
    <div id="collapseEight" class="panel-collapse collapse">
      <div class="panel-body">
        ANSWERS!
      </div>
    </div>
  </div>


  <div class="panel panel-default">
    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseNine">
      <h4 class="panel-title" id="panel-title5">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseNine">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed loborti?
            <span class="arrow"></span>
      </h4>
    </div>
    <div id="collapseNine" class="panel-collapse collapse">
      <div class="panel-body">
        I WANT ANSWERS!
      </div>
    </div>
  </div>                   



</div>
         <br>
        </div>

        <div class="col-md-5 faq right-side">
            <h2><img src="<?php print variable_get('theme_url', ''); ?>/images/feedback.png">&nbsp;Feedback</h2>
            <h3>Lorem ipsum dolor sit amet, consectetur .</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis id nisi nec dapibus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis id nisi nec dapibus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis id nisi nec dapibus.:</p>





        </div>

        </div>

Answer 1

如果您希望面板主体默认显示:

<div id="collapseOne" class="panel-collapse collapse in">

如果你想让面板主体默认隐藏:

<div id="collapseOne" class="panel-collapse collapse">