Bootstrap手风琴不会关闭所有列表项

时间:2014-04-02 16:42:41

标签: javascript jquery css twitter-bootstrap

我在bootstrap手风琴列表中遇到了一个奇怪的问题。总是有一个列表项打开,所有列表项都没有关闭。如果一个是打开的,我单击另一个列表打开,那么只有第一个列表将关闭。

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

知道我缺少什么吗?

这是我的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>

1 个答案:

答案 0 :(得分:1)

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

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

如果您希望默认情况下隐藏面板主体:

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