logo标签列表

Bootstrap手风琴无法折叠？

htmlcsstwitter-bootstrap
3
我遇到了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>
3个回答
8
你的子手风琴项没有折叠，因为你将"data-parent"设置为它们各自的框。如果你将.panel-body的ID更改为accordion-sub，然后更改你的"data-parent"以匹配，你就可以实现一些功能。 http://www.bootply.com/fceay0SjKE
我按照你的示例操作，效果非常好！谢谢。 - giofus
@giofus，我在使用通过npm安装并使用Sass自定义的bootstrap5上出现了手风琴问题。你可以帮我看看这个链接https://stackoverflow.com/questions/71729469/accordion-component-is-not-closing-when-using-bootstrap-5-installed-by-npm-how吗？ - 0x55b1E06FF
2
在您的标记中，div元素没有正确关闭。内部手风琴的第二个data-parent属性也不正确。我已经正确地关闭它们，手风琴现在可以正常使用了。详细了解Bootstrap手风琴示例并仔细应用它。 

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

-2
你的代码中是否包含以下脚本和样式？
将它们放在HTML的标签内或者需要的地方添加即可，它应该能够完美运行。我在本地测试了所有这些代码，Bootstrap的代码确实帮了大忙！
<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>
为什么您建议他们添加与jQuery UI相关的CSS和JavaScript来修正基于Bootstrap的手风琴？ - Robert
所以实际上@giofus可以删除以下脚本，它仍然可以正常工作; <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> - CodingSince007
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接