Bootstrap手风琴不折叠？

我遇到了自举手风琴的麻烦。我希望手风琴打开一个特定的部分，然后关闭所有其他部分，以便只将焦点留在一个手风琴盒上。我也有一个嵌套的手风琴，我正在考虑导致一些问题。Bootstrap手风琴不折叠？

HTML

<div class="panel panel-group" id="accordion"> 
      <div class="panel panel-default"> 
       <div class="brown panel-heading"> 
        <h4 class="panel-title"> 
         <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_1"> 
          Accordion #1 
         </a> 
        </h4> 
       </div> 
       <div id="col_1" class="panel-collapse collapse in"> 
        <div class="panel-body"> 
         <div class="panel panel-default"> 
          <div class="pink panel-heading"> 
           <h4 class="panel-title" style="font-size: 14px;"> 
            <a class="accordion-toggle2" data-toggle="collapse" data-parent="#col_2" href="#col_2"> 
             Accordion #sub1 
            </a> 
           </h4> 
          </div> 
          <div id="col_2" class="panel-collapse collapse"> 
           <div class="panel-body"> 
            <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p> 
           </div> 
          </div> 
         </div> 
         <div class="panel panel-default"> 
          <div class="pink panel-heading"> 
           <h4 class="panel-title" style="font-size: 14px;"> 
            <a class="accordion-toggle2" data-toggle="collapse" data-parent="#col_3" href="#col_3"> 
             Accordion #sub2 
            </a> 
           </h4> 
          </div> 
          <div id="col_3" class="panel-collapse collapse"> 
           <div class="panel-body"> 
            <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p> 
           </div> 
          </div> 
         </div> 
         <div class="panel panel-default"> 
          <div class="pink panel-heading"> 
           <h4 class="panel-title" style="font-size: 14px;"> 
            <a class="accordion-toggle2" data-toggle="collapse" data-parent="#col_4" href="#col_4"> 
             Accordion #sub3 
            </a> 
           </h4> 
          </div> 
          <div id="col_4" class="panel-collapse collapse"> 
           <div class="panel-body"> 
            <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="panel panel-default"> 
        <div class="brown panel-heading"> 
         <h4 class="panel-title"> 
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_7"> 
           Accordion #2 
          </a> 
         </h4> 
        </div> 
        <div id="col_7" class="panel-collapse collapse"> 
         <div class="panel-body"> 
          <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p> 
         </div> 
        </div> 
       </div> 
       <div class="panel panel-default"> 
        <div class="brown panel-heading"> 
         <h4 class="panel-title"> 
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_8"> 
           Accordion #3 
          </a> 
         </h4> 
        </div>  
        <div id="col_8" class="panel-collapse collapse"> 
         <div class="panel-body"> 
          <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p> 
         </div> 
        </div> 
       </div>

来源

2016-08-04 giofus

你的孩子手风琴项目不会崩溃，因为你设置data-parent自己单独的盒子。如果您将accordion-sub的ID应用到.panel-body，然后更改您的data-parent以匹配您的功能。

http://www.bootply.com/fceay0SjKE

来源

2016-08-04 15:14:14

我遵循你的例子，它的作品是一种享受！谢谢。 – giofus

你有没有在你的代码下面的脚本和样式？

将这些放入HTML中或添加到需要的地方，它应该像魅力一样工作。我在本地测试了所有代码，引导程序代码真的帮助它！

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
<script> 
$(function() { 
$("#accordion").accordion(); 
    }); 
</script>

来源

2016-08-04 15:13:29 CodingSince007

你为什么要建议他们加入jQuery用户界面相关的CSS和JavaScript来纠正其基于引导手风琴？ –

因此，实际上@giofus可以删除下面的脚本，它仍然很漂亮; – CodingSince007

在您的标记中，div元素未正确关闭。内手风琴的第二个data-parent属性也是不正确的。我已经关闭它们并且手风琴正在工作。

了解更多关于Bootstrap Accordion Example并仔细应用。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default"> 
 
    <div class="brown panel-heading"> 
 
     <h4 class="panel-title"> 
 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_1"> 
 
      Accordion #1 
 
     </a> 
 
     </h4> 
 
    </div> 
 
    <div id="col_1" class="panel-collapse collapse in"> 
 
     <div class="panel-body"> 
 
     <div class="panel-group" id="accordion-inner" role="tablist" aria-multiselectable="true"> 
 
     <div class="panel panel-default"> 
 
      <div class="pink panel-heading"> 
 
      <h4 class="panel-title" style="font-size: 14px;"> 
 
       <a class="accordion-toggle2" data-toggle="collapse" data-parent="#accordion-inner" href="#col_2"> 
 
       Accordion #sub1 
 
       </a> 
 
      </h4> 
 
      </div> 
 
      <div id="col_2" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
       <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="panel panel-default"> 
 
      <div class="pink panel-heading"> 
 
      <h4 class="panel-title" style="font-size: 14px;"> 
 
       <a class="accordion-toggle2" data-toggle="collapse" data-parent="#accordion-inner" href="#col_3"> 
 
       Accordion #sub2 
 
       </a> 
 
      </h4> 
 
      </div> 
 
      <div id="col_3" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
       <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="panel panel-default"> 
 
      <div class="pink panel-heading"> 
 
      <h4 class="panel-title" style="font-size: 14px;"> 
 
       <a class="accordion-toggle2" data-toggle="collapse" data-parent="#accordion-inner" href="#col_4"> 
 
       Accordion #sub3 
 
       </a> 
 
      </h4> 
 
      </div> 
 
      <div id="col_4" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
       <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div class="brown panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_7"> 
 
      Accordion #2 
 
      </a> 
 
     </h4> 
 
     </div> 
 
     <div id="col_7" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
      <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div class="brown panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_8"> 
 
      Accordion #3 
 
      </a> 
 
     </h4> 
 
     </div>  
 
     <div id="col_8" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
      <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</div>

来源

2016-08-04 15:13:51

谢谢你的帮助 – giofus

Bootstrap手风琴不折叠？

回答

相关问题