Twitter Bootstrap中的手风琴内部手风琴？

Question

我想在另一个手风琴中使用 Twitter Bootstrap 实现手风琴。这可行吗？如果是，请帮我编写代码，因为我尝试过实现，但没有成功。

- avinashizhere

---

请提供您正在使用的代码以及出了什么问题。 - Bojana Šekeljić

Answer 1

只需在具有类accordion-inner的div中包含另一个手风琴即可：

<div class="accordion" id="accordion1">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
      Collapsible Group #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        This is a simple accordion inner content...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">
        Collapsible Group #2 (With nested accordion inside)
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">

        <!-- Here we insert another nested accordion -->

        <div class="accordion" id="accordion2">
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerOne">
                Collapsible Inner Group Item #1
              </a>
            </div>
            <div id="collapseInnerOne" class="accordion-body collapse in">
              <div class="accordion-inner">
                Anim pariatur cliche...
              </div>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerTwo">
                Collapsible Inner Group Item #2
              </a>
            </div>
            <div id="collapseInnerTwo" class="accordion-body collapse">
              <div class="accordion-inner">
                Anim pariatur cliche...
              </div>
            </div>
          </div>
        </div>          

        <!-- Inner accordion ends here -->

      </div>
    </div>
  </div>
</div>

请记得使用不同的手风琴id。

- Alessandro Alessandra

---

同时，折叠的id：<div id="collapse Two "... 需要更改为手风琴的id。 - windsound

Answer 2

在 Bootstrap v3.2.0 中，工作更加流畅。

        <div class="panel-group" id="accordion1">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
              Collapsible Group #1
              </a></h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
              <div class="panel-body">
                This is a simple accordion inner content...
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">
                Collapsible Group #2 (With nested accordion inside)
              </a></h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
              <div class="panel-body">

                <!-- Here we insert another nested accordion -->

                <div class="panel-group" id="accordion2">
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerOne">
                        Collapsible Inner Group Item #1
                      </a></h4>
                    </div>
                    <div id="collapseInnerOne" class="panel-collapse collapse in">
                      <div class="panel-body">
                        Anim pariatur cliche...
                      </div>
                    </div>
                  </div>
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerTwo">
                        Collapsible Inner Group Item #2
                      </a></h4>
                    </div>
                    <div id="collapseInnerTwo" class="panel-collapse collapse">
                      <div class="panel-body">
                        Anim pariatur cliche...
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Inner accordion ends here -->

              </div>
            </div>
          </div>
        </div>

- Francesco

---

很棒的答案，内部手风琴移动比之前的答案更加流畅，前者在动画过程中会有一些跳动。 - Jay

Answer 3

我发现Alessandro的解决方案与Bootstrap 3不兼容。以下是一个可用的解决方案（稍有不同，没有默认展开的面板。如果需要，请添加“in”类）：

<div class="panel-group" id="accordion1">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title"><a class="panel-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
      Collapsible Group #1
      </a></h4>
    </div>
    <div id="collapseOne" class="panel-body collapse">
      <div class="panel-inner">
        This is a simple accordion inner content...
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title"><a class="panel-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">
        Collapsible Group #2 (With nested accordion inside)
      </a></h4>
    </div>
    <div id="collapseTwo" class="panel-body collapse">
      <div class="panel-inner">

        <!-- Here we insert another nested accordion -->

        <div class="panel-group" id="accordion2">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"><a class="panel-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerOne">
                Collapsible Inner Group Item #1
              </a></h4>
            </div>
            <div id="collapseInnerOne" class="panel-body collapse">
              <div class="panel-inner">
                Anim pariatur cliche...
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"><a class="panel-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerTwo">
                Collapsible Inner Group Item #2
              </a></h4>
            </div>
            <div id="collapseInnerTwo" class="panel-body collapse">
              <div class="panel-inner">
                Anim pariatur cliche...
              </div>
            </div>
          </div>
        </div>

        <!-- Inner accordion ends here -->

      </div>
    </div>
  </div>
</div>

- Massimiliano Arione

Answer 4

如果您在嵌套的可折叠元素上使用折叠事件，它有助于阻止折叠事件从面板组级别向上冒泡。否则，由内部可折叠元素触发的折叠事件将到达外部元素，试图处理其自己的可折叠元素触发的折叠事件，并导致意外行为。

$('.panel-group').on('show.bs.collapse shown.bs.collapse hide.bs.collapse hidden.bs.collapse', function (e) {
  e.stopPropagation();
});

这个例子假设您使用“panel-group”作为类名来组合可折叠元素。

- Sorin