如何修复基于Bootstrap 3的HTML5下拉菜单失效问题

一、先查核心依赖加载 #

Bootstrap 3的下拉功能完全靠jQuery和Bootstrap JS驱动，这是最容易出问题的点：

• 得先加载jQuery，再加载Bootstrap的JS文件，顺序绝对不能搞反
• 版本要兼容：Bootstrap 3要求jQuery 1.9.1及以上版本，别用太老或太新的jQuery，容易冲突
• 正确的加载顺序示例（放在页面底部</body>标签前）：

<script src="path/to/jquery.min.js"></script>
<script src="path/to/bootstrap.min.js"></script>

二、修正HTML结构问题 #

从你给的代码看，有几处不符合Bootstrap 3的规范：

1. 顶级<ul>缺必要类
   Bootstrap 3的导航菜单需要nav navbar-nav类才能让JS识别并触发下拉行为，把顶级<ul>改成：

   <ul class="nav navbar-nav">
   

2. 下拉菜单内部结构不规范
   dropdown-menu里不能直接嵌套<div class="row">，得用<li>把row包起来，修改后示例：

   <ul class="dropdown-menu dd_1" style="width:850px; ">
       <li>
           <div class="row">
               <!-- 原来的col-sm-3内容保留 -->
           </div>
       </li>
       <li>
           <div class="row">
               <!-- 原来的第二行col内容保留 -->
           </div>
       </li>
   </ul>
   

3. 确认触发属性没丢
   你的触发按钮已经有data-toggle="dropdown"，这点没问题，但要确保没被其他脚本改掉这个属性

三、排查CSS/JS冲突 #

• 查自定义CSS：看看是不是自己写的样式覆盖了Bootstrap的下拉样式，比如强制设置display: none没让JS切换，或者z-index太低导致下拉被挡住
• 查其他JS：看看页面里有没有其他库（比如Prototype）和jQuery冲突，或者自定义JS用了event.stopPropagation()阻止了点击事件冒泡，导致Bootstrap抓不到触发信号
• 可以临时删掉其他非必要的JS/CSS，一步步排查是不是冲突导致的

四、手动初始化下拉菜单 #

如果自动初始化失效，就手动在页面加载完成后触发初始化：

$(document).ready(function(){
    $('.dropdown-toggle').dropdown();
});

内容的提问来源于stack exchange，提问作者James