Bootstrap手风琴表现得很奇怪

时间:2015-10-15 15:38:01

标签: javascript jquery html css twitter-bootstrap

产品规格部分表现正常。当我点击它显示的组1时,当我点击组2时它将最小化组1并显示组2.

问题是接下来的两个类别,使用和安装以及护理都没有做过孔手风琴的事情。如果我点击组1然后组2它最大化两者,它不会像ti那样最小化组1。

<div class="tab-content">
    <!--Product Specs-->
    <hr>
    <h3 style="text-align: left;">Product Specs</h3>
    <div id="home" class="tab-pane fade in active ">
        <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="#collapseOneSpecs" aria-expanded="false" aria-controls="collapseOneSpecs">
                  Collapsible Group Item #1
                </a>
              </h4>
            </div>
            <div id="collapseOneSpecs" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
              <div class="panel-body">
                Group #1 information
              </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="#collapseTwoSpecs" aria-expanded="false" aria-controls="collapseTwoSpecs">
                  Collapsible Group Item #2
                </a>
              </h4>
            </div>
            <div id="collapseTwoSpecs" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
              <div class="panel-body">
                Group #2 information
              </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="#collapseThreeSpecs" aria-expanded="false" aria-controls="collapseThreeSpecs">
                  Collapsible Group Item #3
                </a>
              </h4>
            </div>
            <div id="collapseThreeSpecs" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
              <div class="panel-body">
                Group #3 information
              </div>
            </div>
          </div>
        </div>
    </div>
    <!--END of Product Specs

    <!--Usage-->
    <hr>
    <h3 style="text-align: left;">Usage</h3>
    <div id="home" class="tab-pane fade in active ">
        <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="#collapseOneUsage" aria-expanded="false" aria-controls="collapseOneUsage">
                  Collapsible Group Item #1
                </a>
              </h4>
            </div>
            <div id="collapseOneUsage" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOneUsage">
              <div class="panel-body">
                Group #1 information
              </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="#collapseTwoUsage" aria-expanded="false" aria-controls="collapseTwoUsage">
                  Collapsible Group Item #2
                </a>
              </h4>
            </div>
            <div id="collapseTwoUsage" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwoUsage">
              <div class="panel-body">
                Group #2 information
              </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="#collapseThreeUsage" aria-expanded="false" aria-controls="collapseThreeUsage">
                  Collapsible Group Item #3
                </a>
              </h4>
            </div>
            <div id="collapseThreeUsage" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThreeUsage">
              <div class="panel-body">
                Group #3 information
              </div>
            </div>
          </div>
        </div>
    </div>
    <!--End of Usage-->

    <!--Installation and care-->
    <hr>
    <h3 style="text-align: left;">Installation & Care</h3>
    <div id="home" class="tab-pane fade in active ">
        <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="#collapseOneCare" aria-expanded="false" aria-controls="collapseOneCare">
                  Collapsible Group Item #1
                </a>
              </h4>
            </div>
            <div id="collapseOneCare" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOneCare">
              <div class="panel-body">
                Group #1 information
              </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="#collapseTwoCare" aria-expanded="false" aria-controls="collapseTwoCare">
                  Collapsible Group Item #2
                </a>
              </h4>
            </div>
            <div id="collapseTwoCare" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwoCare">
              <div class="panel-body">
                Group #2 information
              </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="#collapseThreeCare" aria-expanded="false" aria-controls="collapseThreeCare">
                  Collapsible Group Item #3
                </a>
              </h4>
            </div>
            <div id="collapseThreeCare" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThreeCare">
              <div class="panel-body">
                Group #3 information
              </div>
            </div>
          </div>
        </div>
    </div>
    <!--END of Installation & Care-->

当我点击第2组和第3组中的任何内容时。它会最小化第1组?

jfiddle Link jfiddle link

2 个答案:

答案 0 :(得分:2)

试试这个

<div class="tab-content">
                            <!--Product Specs-->
                            <hr>
                            <h3 style="text-align: left;">Product Specs</h3>
                            <div id="home" class="tab-pane fade in active ">
                                <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="#collapseOneSpecs" aria-expanded="false" aria-controls="collapseOneSpecs">
                                          Collapsible Group Item #1
                                        </a>
                                      </h4>
                                    </div>
                                    <div id="collapseOneSpecs" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                                      <div class="panel-body">
                                        Group #1 information
                                      </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="#collapseTwoSpecs" aria-expanded="false" aria-controls="collapseTwoSpecs">
                                          Collapsible Group Item #2
                                        </a>
                                      </h4>
                                    </div>
                                    <div id="collapseTwoSpecs" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                                      <div class="panel-body">
                                        Group #2 information
                                      </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="#collapseThreeSpecs" aria-expanded="false" aria-controls="collapseThreeSpecs">
                                          Collapsible Group Item #3
                                        </a>
                                      </h4>
                                    </div>
                                    <div id="collapseThreeSpecs" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                                      <div class="panel-body">
                                        Group #3 information
                                      </div>
                                    </div>
                                  </div>
                                </div>
                            </div>
                            <!--END of Product Specs

                            <!--Usage-->
                            <hr>
                            <h3 style="text-align: left;">Usage</h3>
                            <div id="home" class="tab-pane fade in active ">
                                <div class="panel-group" id="accordion1" 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="#accordion1" href="#collapseOneUsage" aria-expanded="false" aria-controls="collapseOneUsage">
                                          Collapsible Group Item #1
                                        </a>
                                      </h4>
                                    </div>
                                    <div id="collapseOneUsage" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOneUsage">
                                      <div class="panel-body">
                                        Group #1 information
                                      </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="#accordion1" href="#collapseTwoUsage" aria-expanded="false" aria-controls="collapseTwoUsage">
                                          Collapsible Group Item #2
                                        </a>
                                      </h4>
                                    </div>
                                    <div id="collapseTwoUsage" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwoUsage">
                                      <div class="panel-body">
                                        Group #2 information
                                      </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="#accordion1" href="#collapseThreeUsage" aria-expanded="false" aria-controls="collapseThreeUsage">
                                          Collapsible Group Item #3
                                        </a>
                                      </h4>
                                    </div>
                                    <div id="collapseThreeUsage" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThreeUsage">
                                      <div class="panel-body">
                                        Group #3 information
                                      </div>
                                    </div>
                                  </div>
                                </div>
                            </div>
                            <!--End of Usage-->

                            <!--Installation and care-->
                            <hr>
                            <h3 style="text-align: left;">Installation & Care</h3>
                            <div id="home" class="tab-pane fade in active ">
                                <div class="panel-group" id="accordion2" 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="#accordion2" href="#collapseOneCare" aria-expanded="false" aria-controls="collapseOneCare">
                                          Collapsible Group Item #1
                                        </a>
                                      </h4>
                                    </div>
                                    <div id="collapseOneCare" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOneCare">
                                      <div class="panel-body">
                                        Group #1 information
                                      </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="#accordion2" href="#collapseTwoCare" aria-expanded="false" aria-controls="collapseTwoCare">
                                          Collapsible Group Item #2
                                        </a>
                                      </h4>
                                    </div>
                                    <div id="collapseTwoCare" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwoCare">
                                      <div class="panel-body">
                                        Group #2 information
                                      </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="#accordion2" href="#collapseThreeCare" aria-expanded="false" aria-controls="collapseThreeCare">
                                          Collapsible Group Item #3
                                        </a>
                                      </h4>
                                    </div>
                                    <div id="collapseThreeCare" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThreeCare">
                                      <div class="panel-body">
                                        Group #3 information
                                      </div>
                                    </div>
                                  </div>
                                </div>
                            </div>
       

	   <!--END of Installation & Care-->

答案 1 :(得分:0)

您的所有小组都具有相同的ID

尝试将id = accordion更改为id = accordion1,id = accordion2和id = accordion3