Bootstrap手风琴没有崩溃？

Question

我在使用自举手风琴时遇到了麻烦。我希望手风琴打开一个特定的部分，然后关闭所有其他部分，以便只关注一个手风琴盒。我也有一个嵌套的手风琴，我想这会引起一些问题。

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>

Answer 1

在您的标记中，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>

Answer 2

您的代码中是否有以下脚本和样式？

将这些放入您的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>

Answer 3

您的孩子手风琴项目没有崩溃，因为您已将data-parent设置为各自的盒子。如果您将accordion-sub的ID应用于.panel-body，然后将data-parent更改为与您相匹配，那么就会实现正常运作。

http://www.bootply.com/fceay0SjKE