Bootstrap 4.5侧边栏导航：取消下拉菜单互斥关闭功能

安全阿岳

2026-7-12

实现Bootstrap 4.5侧边栏多下拉菜单同时展开功能

我把Bootstrap 4.5导航栏改成了侧边栏菜单，功能基本正常，但存在问题：打开一个下拉菜单时，已展开的其他下拉菜单会自动关闭。我希望实现多个下拉菜单同时展开的效果，此前尝试调整后曾实现多下拉展开，但之后菜单无法正常关闭。

以下是我的代码：

HTML代码

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<nav class="navbar navbar-dark bg-darknavbar justify-content-sm-spacearound fixed-top"> 
  <button class="navbar-toggler align-self-start" type="button"> <span class="navbar-toggler-icon"></span> </button>
  <a class="navbar-brand" href="#"> LOGO </a>
    <h1 id="header-text" class="text-white cera-pro d-none d-md-block">FLEET OFFICE</h1>
  <div class="collapse navbar-collapse bg-dark p-3 p-lg-0 mt-lg-0 d-flex flex-column flex-lg-row flex-xl-row justify-content-lg-start mobileMenu"
          id="navbarSupportedContent">
    <ul class="navbar-nav align-self-stretch">
      <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
      <li class="nav-item dropdown"> <a
                class="nav-link dropdown-toggle"
                href="#"
                id="navbarDropdown"
                role="button"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"> Contracts </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 
            <a class="dropdown-item" href="http://www.google.com">View Contracts <input class="star-button" type="checkbox" /></a>
            <a class="dropdown-item" href="#">Contracts Modifications <input class="star-button" type="checkbox" /></a> 
            <a class="dropdown-item" href="#">Vehicle Lease <input class="star-button" type="checkbox" /></a> 
          </div>
      </li>
      <li class="nav-item dropdown"> <a
                class="nav-link dropdown-toggle"
                href="#"
                id="navbarDropdown"
                role="button"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"> Quote & Order </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 
            <a class="dropdown-item" href="#">Quote Requests <input class="star-button" type="checkbox" /></a> 
            <a class="dropdown-item" href="#">Quotes for Review <input class="star-button" type="checkbox" /></a> 
            <a class="dropdown-item" href="#">Vehicles Orders <input class="star-button" type="checkbox" /></a> 
            <a class="dropdown-item" href="#">Release Quotes <input class="star-button" type="checkbox" checked/></a> 
          </div>
      </li>
    </ul>
  </div> 
</nav>
<div class="overlay"></div>

CSS代码

.sidebar-buttons img {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 10px;
}
.sidebar-buttons #pin-button {
  right: 10px;
}
.sidebar-buttons #home-button {
  right: 50px;
}
.sidebar-buttons img:hover, .sidebar-buttons img:focus {
  background: #555;
  color: #fff;
}
input.star-button[type="checkbox"] {
    content: url('assets/brand/star_empty_white.svg');
    appearance: none;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 10px;
}
input.star-button[type="checkbox"]:checked {
    content: url('assets/brand/star_filled_white.svg');
}
.navbar {
  height: 50px;
}
.navbar-brand img {
  left: 50px;
  top: 0;
  width: 130px;
}
h1#header-text {
  position: absolute;
  right: 40%;
  width: 190px;
}
.bg-darknavbar {
  background: #15161A !important;
}
.dropdown-menu {
  background-color: transparent;
}
.dropdown-item {
  color: #fff;
  padding: 0;
}
a.nav-link {
  font-family: "Cera-PRO-Bold", Arial Black, Sans-serif !important;
  font-size: 0.9375em;
}
a.dropdown-item {
  font-family: "Cera-PRO-Regular", Arial, Sans-serif !important;
  font-size: 0.75em;
}
.dropdown-item:hover, .dropdown-item:focus {
  color: #fff;
  background-color: transparent;
  text-decoration: underline;
}
.nav-link.dropdown-toggle {
  width: 240px;
  border-bottom: 1px solid rgba(255, 255, 255, 1);
}
.dropdown-toggle::after {
  float: right;
  margin-top: 16px;
}
.navbar-collapse {
  background-color: #15161A !important;
}
.mobileMenu {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  position: fixed;
  top: 50px;
  bottom: 0;
  margin: auto;
  left: 0;
  -webkit-transition: all ease 0.25s;
  transition: all ease 0.25s;
  width: 300px;
  background: #2E3138 0% 0% no-repeat padding-box;
  opacity: 92%;
}
.mobileMenu.open {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}
.mobileMenu .navbar-nav {
  overflow-y: auto;
  padding-left: 15px;
  padding-top: 50px;
}
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: rgba(0, 0, 0, 0);
  display: none;
}
.overlay.open {
  display: block;
  z-index: 1029;
}

JS代码

$('a.dropdown-item').on('click', function(e){
 e.stopPropagation();
});

$('a#navbarDropdown.nav-link.dropdown-toggle').on('click', function(e){
 e.preventDefault();
});

//sidebar menu
var fixHeight = function() {
$('.navbar-nav').css(
  'max-height',
  document.documentElement.clientHeight - 150
);
  };
  fixHeight();
  $(window).resize(function() {
    fixHeight();
  });
  $('.navbar .navbar-toggler').on('click', function() {
    fixHeight();
  });
  $('.navbar-toggler, .overlay').on('click', function() {
    $('.mobileMenu, .overlay').toggleClass('open');
  });

解决方案

Bootstrap默认下拉组件会在点击新下拉时关闭其他下拉，要实现多展开且正常关闭，需要修改逻辑并修复HTML问题：

1. 修复HTML重复ID问题

HTML中两个下拉菜单用了同一个id="navbarDropdown"，这违反规范，会导致JS冲突。修改为唯一ID：

<li class="nav-item dropdown"> 
  <a class="nav-link dropdown-toggle" href="#" id="contractsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    Contracts 
  </a>
  <div class="dropdown-menu" aria-labelledby="contractsDropdown"> 
      <!-- 下拉项内容不变 -->
    </div>
</li>
<li class="nav-item dropdown"> 
  <a class="nav-link dropdown-toggle" href="#" id="quoteDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    Quote & Order 
  </a>
  <div class="dropdown-menu" aria-labelledby="quoteDropdown"> 
      <!-- 下拉项内容不变 -->
    </div>
</li>

2. 修改JS逻辑实现独立下拉控制

移除原有针对下拉切换的默认行为阻止代码，添加自定义切换逻辑，让每个下拉独立控制状态：

$('a.dropdown-item').on('click', function(e){
 e.stopPropagation();
});

// 自定义多下拉展开/关闭逻辑
$('.nav-item.dropdown .dropdown-toggle').on('click', function(e) {
  e.preventDefault();
  const $dropdownItem = $(this).closest('.nav-item.dropdown');
  const isExpanded = $dropdownItem.hasClass('show');

  // 仅切换当前下拉的状态，不影响其他下拉
  if (isExpanded) {
    $dropdownItem.removeClass('show');
    $dropdownItem.find('.dropdown-menu').removeClass('show');
    $(this).attr('aria-expanded', 'false');
  } else {
    $dropdownItem.addClass('show');
    $dropdownItem.find('.dropdown-menu').addClass('show');
    $(this).attr('aria-expanded', 'true');
  }
});

//sidebar menu原有逻辑不变
var fixHeight = function() {
$('.navbar-nav').css(
  'max-height',
  document.documentElement.clientHeight - 150
);
  };
  fixHeight();
  $(window).resize(function() {
    fixHeight();
  });
  $('.navbar .navbar-toggler').on('click', function() {
    fixHeight();
  });
  $('.navbar-toggler, .overlay').on('click', function() {
    $('.mobileMenu, .overlay').toggleClass('open');
  });

说明

自定义逻辑通过控制Bootstrap的show类实现下拉显示/隐藏，每个下拉独立操作，不会关闭其他已展开的下拉
修复重复ID问题，避免潜在的JS和HTML规范问题
保留原有侧边栏的高度自适应、侧边栏切换等功能

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

Bootstrap 4.5侧边栏导航：取消下拉菜单互斥关闭功能

HTML代码 #

CSS代码 #

JS代码 #

解决方案 #