微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

twitter-bootstrap – Accordion Inside Accordion twitter bootstrap?

我正在尝试使用Twitter Bootstrap在另一支手风琴中实现手风琴。可能吗?如果是这样,那么请帮助我代码,因为我尝试实施它但我没有成功。

解决方法

简单地在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。

原文地址:https://www.jb51.cc/bootstrap/234169.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐