如何在Bootstrap 3中实现类似Bootstrap 2的子菜单功能

数据老陈

2026-10-5

Bootstrap 3 子菜单实现方案

Bootstrap 3 官方已移除了原 Bootstrap 2 自带的 dropdown-submenu 组件，你可以通过添加自定义样式和可选的JS代码快速实现相同的子菜单效果：

1. 新增自定义CSS

将以下代码加入你的样式文件中，即可实现桌面端hover自动展开子菜单：

.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:hover > .dropdown-menu {
    display: block;
}
.dropdown-submenu > a:after {
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
    border-left-color: #fff;
}
.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
    border-radius: 6px 0 6px 6px;
}

2. 复用现有HTML结构

你当前使用的带 dropdown-submenu 类的HTML结构无需修改，直接即可生效：

<li class="dropdown open">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Vehicles<span class="fa fa-angle-down"></span></a>
    <ul class="dropdown-menu">
        <li><a href="/audi">Audi</a></li>
        <li><a href="/bmw">BMW</a></li>
        <li><a href="/honda">Honda</a></li>
        <li class="dropdown-submenu">
            <a href="/maruti">Maruti</a>
            <ul class="dropdown-menu">
                <li><a href="/suzuki">Suzuki</a></li>
                <li><a href="/suzuki">Suzuki</a></li>
            </ul>
        </li>
    </ul>
</li>

3. 可选：添加移动端适配JS

如果需要支持移动端点击展开子菜单，添加以下JS代码即可：

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