Bootstrap v3下拉菜单在Sinatra应用部分视图中无法正常工作

嗨，我之前也碰到过类似的情况——Sinatra项目里，布局里的Bootstrap下拉菜单在同级视图正常，子目录视图里点了只会跳个#却不展开，核心问题大多和资源路径引用或者JS初始化有关，给你几个具体的排查和解决步骤：

1. 改用绝对路径引用JS依赖 #

子目录视图的相对路径基准和同级视图不一样，比如你在同级视图用js/jquery.min.js能加载到，但在/posts/detail这种子路由里，相对路径会变成/posts/js/jquery.min.js，自然找不到文件。

把所有JS、CSS的引用改成根路径开头的绝对路径，比如：

<!-- 正确的绝对路径写法 -->
<script src="/assets/js/jquery.min.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/assets/css/bootstrap.min.css">

Sinatra里只要你正确配置了静态资源目录（默认public），根路径开头的引用就能正确找到文件。

2. 确认JS加载顺序 #

Bootstrap的下拉菜单依赖jQuery，必须保证jQuery先于Bootstrap JS加载，顺序错了会直接导致下拉功能失效，检查你的布局里的引用顺序：

<!-- 正确顺序：先jQuery，再Bootstrap JS -->
<script src="/assets/js/jquery.min.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>

3. 检查下拉菜单的HTML结构 #

确保你的下拉菜单结构完全符合Bootstrap v3的要求，不要漏了关键类和属性：

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    下拉菜单
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">选项1</a></li>
    <li><a href="#">选项2</a></li>
    <li><a href="#">选项3</a></li>
  </ul>
</div>

重点要保证：

• 外层容器有.dropdown类
• 触发按钮有.dropdown-toggle类和data-toggle="dropdown"属性
• 下拉菜单容器有.dropdown-menu类

4. 手动初始化下拉菜单（如果自动初始化失效） #

有时候因为DOM加载顺序或者路径问题，Bootstrap的自动初始化没生效，可以手动在布局底部添加初始化代码：

$(document).ready(function() {
  // 手动初始化所有下拉切换按钮
  $('.dropdown-toggle').dropdown();
});

按这几步排查下来，基本就能解决子目录视图里下拉菜单失效的问题啦～

内容的提问来源于stack exchange，提问作者C. Boujoukos