Bootstrap3导航栏三级下拉子菜单点击无响应如何修复

问题核心 #

Bootstrap 3 原生组件仅支持单层下拉菜单，没有内置多级嵌套下拉的交互逻辑，当前点击二级分类PC无法触发三级菜单展开属于框架默认限制。

修复方案 #

你需要额外添加自定义CSS和JS代码实现多级下拉功能，具体修改如下： #

1. 新增自定义CSS样式

在原有bootstrap.min.css引用之后加入以下样式：

.dropdown-submenu {
  position: relative;
}
.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  border-radius: 0 6px 6px 6px;
}
.dropdown-submenu > a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #ccc;
  margin-top: 5px;
  margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
  border-left-color: #fff;
}

2. 修改HTML结构

给嵌套子菜单的父li元素添加dropdown-submenu类，移除二级分类a标签上的data-toggle="dropdown"属性，修改后的导航部分结构如下：

<ul class="nav navbar-nav">
  <li>
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Platforms<span class="caret"></span></a>
    <ul class="dropdown-menu">
      <!-- 给PC对应的li添加dropdown-submenu类 -->
      <li class="dropdown-submenu">
        <a href="#">PC<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">game</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

3. 补充点击展开交互逻辑

如果需要点击PC分类才展开三级菜单而非hover触发，可以添加以下JS代码：

$(document).ready(function(){
  $('.dropdown-submenu a').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});

完整可运行代码示例 #

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.dropdown-submenu {
  position: relative;
}
.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  border-radius: 0 6px 6px 6px;
}
.dropdown-submenu > a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #ccc;
  margin-top: 5px;
  margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
  border-left-color: #fff;
}
</style>
<div class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-12">
        <div class="navbar-header">
          <button class="navbar-toggle" data-target="#mobile_menu" data-toggle="collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
        </div>
        <div class="navbar-collapse collapse" id="mobile_menu">
          <ul class="nav navbar-nav">
            <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Platforms<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li class="dropdown-submenu">
                  <a href="#">PC<span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">game</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
  $('.dropdown-submenu a').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
</script>

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