引导手风琴表现怪异

产品规格部分表现正确。当我点击组1时，它显示，当我点击组2时，它将使组1和组2显示最小化。引导手风琴表现怪异

问题是接下来的两个类别，Usage and Installation and Care are not the hole accordion事情。如果我点击第1组，然后第2组，它最大化两个，它不会最小化组1像TI应该。

<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链接jfiddle link

来源

2015-10-15 Charles

请发布你的jsfiddle。 – Alex

添加了jfiddle @alirezasafian – Charles

试试这个

<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> 
 
     
 

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

来源

2015-10-15 15:53:28

这工作可以请你指示我你做了什么？ – Charles

我修改了组2和组3的id = accordion。您将看到组2具有accordion1作为id，group2具有accordion2。我还必须更改相应面板的data-parent = –

你所有的面板组具有相同的ID

尝试改变ID =手风琴ID = accordion1，ID = accordion2和id = accordion3

来源

2015-10-15 15:42:26

删除了问题母鸡我没有点击任何组2中的任何东西它是他的组1，但是组2和3仍然不会例如当点击问题3时不会关闭问题。 – Charles

引导手风琴表现怪异

回答

相关问题