跳到主要内容

Bootstrap 手风琴与下拉菜单组件实战手册

2026-07-03 ·

手风琴和下拉菜单是 Bootstrap 中使用频率最高的交互组件之一。本文通过多个实战案例，深入讲解这两个组件的核心用法、高级技巧和常见问题解决方案。

手风琴（Accordion）核心用法

Bootstrap 的手风琴基于 Collapse 插件构建，核心 HTML 结构包括 .accordion、.accordion-item、.accordion-header 和 .accordion-body：

<div class="accordion" id="accordionExample">
    <div class="accordion-item">
        <h3 class="accordion-header">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
                面板标题
            </button>
        </h3>
        <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                面板内容
            </div>
        </div>
    </div>
</div>

手风琴高级技巧

始终折叠模式

默认手风琴在同一时间只能展开一个面板。如果不希望面板互斥，移除 data-bs-parent 属性即可：

<div class="accordion" id="accordionIndependent">
    <div class="accordion-item">
        <h3 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#independentOne">
                面板一（独立展开）
            </button>
        </h3>
        <!-- 注意：没有 data-bs-parent 属性 -->
        <div id="independentOne" class="accordion-collapse collapse">
            <div class="accordion-body">此面板不受其他面板影响</div>
        </div>
    </div>
</div>

无边框手风琴

添加 .accordion-flush 类创建无边界的极简风格手风琴：

<div class="accordion accordion-flush" id="accordionFlush">
    <div class="accordion-item">
        <h3 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flushOne">
                无边框面板
            </button>
        </h3>
        <div id="flushOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlush">
            <div class="accordion-body">无缝集成到背景中</div>
        </div>
    </div>
</div>

编程式控制

通过 JavaScript API 控制手风琴展开与折叠：

// 获取 Collapse 实例
var collapseEl = document.getElementById('myCollapse');
var collapse = bootstrap.Collapse.getOrCreateInstance(collapseEl);

// 展开
collapse.show();

// 折叠
collapse.hide();

// 切换
collapse.toggle();

// 监听事件
collapseEl.addEventListener('shown.bs.collapse', function() {
    console.log('面板已展开');
});
collapseEl.addEventListener('hidden.bs.collapse', function() {
    console.log('面板已折叠');
});

下拉菜单（Dropdowns）核心用法

下拉菜单是最常用的交互组件之一，用于展示可操作选项列表：

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        下拉菜单
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">操作一</a></li>
        <li><a class="dropdown-item" href="#">操作二</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">分离操作</a></li>
    </ul>
</div>

下拉菜单高级技巧

分割按钮

使用 .btn-group 和 .dropdown-toggle-split 创建分割按钮：

<div class="btn-group">
    <button type="button" class="btn btn-primary">保存</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">更多选项</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">另存为...</a></li>
        <li><a class="dropdown-item" href="#">导出为 PDF</a></li>
    </ul>
</div>

对齐控制

默认左对齐，使用 .dropdown-menu-end 实现右对齐：

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
        右对齐下拉
    </button>
    <ul class="dropdown-menu dropdown-menu-end">
        <li><a class="dropdown-item" href="#">菜单项</a></li>
    </ul>
</div>

支持响应式对齐：.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end

方向控制

改变下拉菜单的展开方向：

<!-- 上拉 -->
<div class="btn-group dropup">
    <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">上拉</button>
    <ul class="dropdown-menu">...</ul>
</div>

<!-- 右拉 -->
<div class="btn-group dropend">
    <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">右拉</button>
    <ul class="dropdown-menu">...</ul>
</div>

<!-- 左拉 -->
<div class="btn-group dropstart">
    <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">左拉</button>
    <ul class="dropdown-menu">...</ul>
</div>

自动关闭行为

通过 data-bs-auto-close 控制菜单的关闭行为：

值行为
true点击菜单内外都关闭（默认）
false点击任何地方都不自动关闭
inside仅点击菜单内部关闭
outside仅点击菜单外部关闭

菜单内容扩展

下拉菜单不仅限于链接，可以包含表单、标题和分隔线：

<div class="dropdown-menu" style="max-width: 300px;">
    <h6 class="dropdown-header">搜索 </h6>
    <form class="px-3 pb-2">
        <input type="search" class="form-control form-control-sm" placeholder="输入关键字...">
    </form>
    <hr class="dropdown-divider">
    <a class="dropdown-item" href="#">高级搜索</a>
    <a class="dropdown-item disabled" href="#">最近搜索无记录</a>
</div>

响应式技巧

在移动端，手风琴和下拉菜单的交互方式与桌面端不同。以下是一些优化建议：

  • 导航栏下拉：使用 .navbar-nav .dropdown 配合 .dropdown-menu，在移动端自动变为点击展开
  • 手风琴触控：移动端手风琴的点击区域应该足够大（建议最小 44px 高度）
  • 避免嵌套：下拉菜单内避免嵌套其他下拉菜单，移动端操作困难
  • 触控反馈：为下拉菜单项添加 :active 样式，提供触控反馈

常见问题

手风琴展开时页面跳动？

可以在手风琴容器上添加 min-height 或使用 CSS 动画平滑过渡：

.accordion-collapse.collapsing {
    transition: height 0.35s ease;
}

下拉菜单位置错乱？

确保下拉菜单的容器没有 overflow: hidden 样式。如果问题持续，可以设置 data-bs-display="static" 禁用 Popper 动态定位，然后通过 CSS 手动调整位置。

JS 插件不工作？

检查两个要点：一是确保引入了 bootstrap.bundle.js（包含 Popper），二是确认所有 data 属性使用 data-bs- 前缀（如 data-bs-toggle 而非 data-toggle）。

总结

手风琴和下拉菜单是构建交互式界面的基础组件。掌握它们的高级用法能显著提升用户体验：

  • 使用 data-bs-parent 控制手风琴互斥行为
  • 利用 .accordion-flush 创建无边框风格
  • 通过 .dropup、.dropend、.dropstart 控制下拉方向
  • 使用 data-bs-auto-close 精细控制关闭行为

更多内容请查看 手风琴文档 和 下拉菜单文档。

本网站使用 Cookie 来提升您的浏览体验。隐私政策