Bootstrap 的下拉组件依赖 JavaScript（尤其是 Popper 和 Bootstrap JS）才能触发展开行为；若仅引入 CSS 而未加载对应 JS 文件，.dropdown 或自定义下拉结构将完全静默——这是最常见的“点击无反应”根本原因。
bootstrap 下拉菜单无法展开？原因及完整解决方案
在使用 Bootstrap 构建响应式下拉交互（如商品筛选中的“Show: 50”或“Sort by: High to Low”）时，你可能会遇到点击后 <ul> 列表完全不展开的问题——即使 HTML 结构语义正确、CSS 类名无误、Thymeleaf 动态链接也渲染正常。这并非样式冲突或模板引擎问题，而是一个被频繁忽略的核心前提：Bootstrap 的下拉（Dropdown）组件是 JavaScript 驱动的交互组件，必须显式引入并初始化相关 JS 资源，否则纯 HTML/CSS 无法激活任何下拉行为。
✅ 正确启用 Bootstrap 下拉功能的三步关键操作
-
确保 Bootstrap CSS 已加载（基础样式支持）
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
-
必须引入 Bootstrap JavaScript（含 Popper）
Bootstrap 5+ 移除了对 jQuery 的依赖，但必须使用 bootstrap.bundle.min.js（已内置 Popper），不可仅用 bootstrap.min.js（不含 Popper，会导致下拉定位失败甚至不触发）：<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
⚠️ 注意：若你使用的是本地文件，请确认路径正确且服务器能访问该 JS；CDN 链接需放在 </body> 闭合前（或确保 DOM 加载完成后执行）。
-
为下拉容器添加标准 Bootstrap 类与数据属性（推荐方式）
你当前的 HTML 是手动实现的“类下拉”结构（无 dropdown 语义类），虽可配合自定义 JS 控制，但强烈建议迁移到 Bootstrap 官方下拉模式，以获得自动事件绑定、键盘导航、无障碍支持和响应式适配：<div class="dropdown"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <i class="fi-rs-apps"></i> Show: <span id="show-count">50</span> <i class="fi-rs-angle-small-down"></i> </button> <ul class="dropdown-menu"> <li><a class="dropdown-item active" href="#" onclick="updateShow(50)">50</a></li> <li><a class="dropdown-item" href="#" onclick="updateShow(100)">100</a></li> <li><a class="dropdown-item" href="#" onclick="updateShow(150)">150</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#" onclick="updateShow('all')">All</a></li> </ul> </div>对应 JS（可选，用于更新按钮文本）：
<script> function updateShow(value) { document.getElementById('show-count').textContent = value === 'all' ? 'All' : value; // 此处可追加 AJAX 请求或页面跳转逻辑 } </script>
❗ 常见误区与排查清单
- ▢ 仅引入了 bootstrap.min.css，遗漏 bootstrap.bundle.min.js → 必现失效
- ▢ 引入了 bootstrap.min.js（非 bundle 版）→ 缺少 Popper，下拉位置错乱或不显示
- ▢ JS 脚本位于 <head> 中且未加 defer → DOM 尚未解析，初始化失败
- ▢ 自定义结构（如你的 .sort-by-dropdown）未绑定任何 JS 事件监听 → 点击无响应（Bootstrap 不会自动接管非标准类）
- ▢ 浏览器控制台报错 ReferenceError: bootstrap is not defined → JS 加载失败或顺序错误
✅ 总结
下拉菜单“不展开”的本质不是 HTML 写错，而是交互能力缺失。Bootstrap 的 Dropdown 是 JS 组件，不是纯 CSS 效果。 请立即检查并补全 bootstrap.bundle.min.js 的引入；若需保留现有 DOM 结构，可手动用原生 JS 添加 click 事件切换 .show 类（参考 Bootstrap 源码逻辑），但标准迁移是最可靠、可维护性最高的方案。完成 JS 加载后，无需额外初始化——Bootstrap 会自动为所有 data-bs-toggle="dropdown" 元素启用下拉功能。
