Bootstrap三级行内下拉菜单第三层级无法展开问题求助

Bootstrap原生的dropdown组件仅支持两级菜单，你当前的三级菜单结构需要补充自定义CSS和JavaScript才能实现展开功能，以下是完整解决方案：

完整代码示例 #

1. HTML结构（含依赖引入） #

<!-- 引入Bootstrap依赖 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>

<ul class="nav navbar-nav">          
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Courses <span class="caret"></span></a>
        <ul class="dropdown-menu">
           <li class="dropdown-submenu">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Computer Courses<span class="caret"></span></a>
                 <ul class="dropdown-menu">
                     <li><a href="#"><i class="glyphicon glyphicon-menu-right"></i>IT Advance</a></li>
                     <li><a href="#"><i class="glyphicon glyphicon-menu-right"></i>Web Designing</a></li>
                 </ul>
           </li>
           <li class="dropdown-submenu">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Civil Courses<span class="caret"></span></a>
              <ul class="dropdown-menu">
                 <li><a href="#"><i class="glyphicon glyphicon-menu-right"></i>Civil Survey</a></li>
                 <li><a href="#"><i class="glyphicon glyphicon-menu-right"></i>Quantity Survey</a></li>
              </ul>
          </li> 
     </ul>
   </li>
</ul>

2. 自定义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.open > .dropdown-menu {
    display: block;
}

/* 调整二级菜单右侧箭头样式 */
.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.open > a:after {
    border-left-color: #fff;
}

3. 自定义JavaScript（处理点击交互） #

$(document).ready(function() {
    // 监听二级菜单点击事件
    $('.dropdown-submenu a.dropdown-toggle').on("click", function(e) {
        e.stopPropagation(); // 阻止事件冒泡，避免父菜单关闭
        $(this).next('ul').toggle(); // 切换三级菜单显示/隐藏
        // 更新无障碍属性状态
        $(this).attr('aria-expanded', $(this).attr('aria-expanded') === 'true' ? 'false' : 'true');
    });

    // 点击页面其他区域关闭所有三级菜单
    $(document).click(function() {
        $('.dropdown-submenu .dropdown-menu').hide();
        $('.dropdown-submenu a.dropdown-toggle').attr('aria-expanded', 'false');
    });
});

关键说明 #

• CSS部分：通过相对/绝对定位让三级菜单显示在父菜单右侧，调整箭头样式区分层级。
• JavaScript部分：阻止点击事件冒泡，避免触发父级菜单的关闭逻辑，同时处理全局点击事件来关闭展开的菜单，保证交互一致性。

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