Twitter Bootstrap:如何创建一个带有手风琴的下拉按钮? [英] Twitter Bootstrap: How to create a dropdown button with an accordion inside it?

问题描述

在Twitter Bootstrap中，我试图创建一个带有手风琴的按钮下拉列表.

In Twitter Bootstrap, I am trying to create a button dropdown with an accordion inside it.

目的是以简洁的形式显示一长列商品(即避免用户长时间向下滚动).

the purpose is to present a long list of items in a concise form (i.e. avoid long scroll-downs by the user).

在下拉div中包含手风琴div的简单方法不起作用..:

the straightforward way of including an accordion div inside a dropdown div does not work..:

<div class="dropdown">
    <a data-toggle="dropdown" href="#">Dropdown trigger</a>
    <div class="dropdown-menu" role="menu" aria-labelledby="dLabel" id="accordion">
    <h3>Unit 1</h3>
    <div>
      <p>item a</p>
      <p>item b</p>
    </div>
    <h3>Unit 2</h3>
    <div>
      <p>item c</p>
      <p>item d</p>
      <p>item e</p>
    </div>
  </div>            
</div>

有什么想法可以实现吗?

Any ideas how can one implement this?

推荐答案

您可以使用以下命令在下拉列表中插入手风琴:

You can insert an accordion inside a dropdown using :

• 引导程序下拉组件
• 启动崩溃组件

• Bootstrap Dropdown component
• Bootstrap Collapse component

您需要添加几行JS，以防止Dropdown事件破坏折叠事件.

You'll need to add a few lines of JS to prevent Dropdown events to break Collapse ones.

在Bootply上的工作示例

Working example on Bootply

<div class="dropdown dropdown-accordion" data-accordion="#accordion">
  <a data-toggle="dropdown" href="#" class="btn btn-primary">Dropdown trigger <span class="caret"></span></a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li>
      <div class="panel-group" id="accordion">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                Unit 1
              </a>
            </h4>
          </div>
          <div id="collapseOne" class="panel-collapse collapse">
            <div class="panel-body">
              <a href="#">Item a</a><br>
              <a href="#">Item b</a>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                Unit 2
              </a>
            </h4>
          </div>
          <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
              <a href="#">Item a</a><br>
              <a href="#">Item b</a><br>
              <a href="#">Item c</a>
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

.dropdown-accordion .panel-heading {
  padding: 0;
}
.dropdown-accordion .panel-heading a {
  display: block;
  padding: 10px 15px;
}

// Collapse accordion every time dropdown is shown
$('.dropdown-accordion').on('show.bs.dropdown', function (event) {
  var accordion = $(this).find($(this).data('accordion'));
  accordion.find('.panel-collapse.in').collapse('hide');
});

// Prevent dropdown to be closed when we click on an accordion link
$('.dropdown-accordion').on('click', 'a[data-toggle="collapse"]', function (event) {
  event.preventDefault();
  event.stopPropagation();
  $($(this).data('parent')).find('.panel-collapse.in').collapse('hide');
  $($(this).attr('href')).collapse('show');
})

这篇关于Twitter Bootstrap:如何创建一个带有手风琴的下拉按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！