手风琴内部手风琴Twitter引导程序？ [英] Accordion Inside Accordion twitter bootstrap?

问题描述

我正在尝试使用Twitter Bootstrap在另一个手风琴中实现一个手风琴。可能吗？如果是这样，那么请帮助我编写代码，因为我尝试实现它，但未成功。

I'm trying to implement an accordion inside another accordion using Twitter Bootstrap. Is it possible? if so, then please help me with the code because i tried implementing it but I wasn't successful.

推荐答案

只需在div内包含另一个带有手风琴类的手风琴即可：

Simply include another accordion inside the div with the class accordion-inner:

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

Remember to use different accordion ids.

这篇关于手风琴内部手风琴Twitter引导程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！