如何在桌面视图中实现Bootstrap 5侧边栏切换功能？

首先要明确：Bootstrap官方dashboard示例里的侧边栏切换功能依赖自定义CSS和对应DOM结构，光靠你那段jQuery代码肯定达不到预期效果，按下面步骤调整即可：

1. 匹配正确的HTML结构 #

页面DOM结构要和官方示例对齐，参考如下模板：

<div id="wrapper">
  <!-- 侧边栏容器 -->
  <div id="sidebar-wrapper">
    <ul class="sidebar-nav">
      <li class="sidebar-brand"><a href="#">项目名称</a></li>
      <li><a href="#">菜单选项1</a></li>
      <li><a href="#">菜单选项2</a></li>
      <!-- 更多菜单项 -->
    </ul>
  </div>
  <!-- 主内容容器 -->
  <div id="page-content-wrapper">
    <!-- 侧边栏切换按钮 -->
    <button id="menu-toggle" class="btn btn-primary">切换侧边栏</button>
    <!-- 页面主体内容 -->
    <div class="container-fluid">
      <h1>主内容区域</h1>
    </div>
  </div>
</div>

2. 添加自定义切换样式 #

官方示例的展开/收起效果是靠自定义CSS实现的，把这段样式加到你的样式文件里：

#wrapper {
  padding-left: 250px;
  transition: all 0.4s ease 0s;
}

#sidebar-wrapper {
  margin-left: -250px;
  left: 250px;
  width: 250px;
  background-color: #212529;
  position: fixed;
  height: 100vh;
  overflow-y: auto;
  z-index: 1000;
  transition: all 0.4s ease 0s;
}

#page-content-wrapper {
  width: 100%;
  padding: 1rem;
}

/* 切换后的状态样式 */
#wrapper.toggled {
  padding-left: 0;
}

#wrapper.toggled #sidebar-wrapper {
  left: 0;
}

.sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-nav li {
  line-height: 4rem;
  text-indent: 1.5rem;
}

.sidebar-nav li a {
  color: #adb5bd;
  text-decoration: none;
  display: block;
}

.sidebar-nav li a:hover {
  color: #fff;
  background-color: rgba(255,255,255,0.1);
}

3. 调整交互代码 #

如果你继续用jQuery： #

Bootstrap 5默认不再依赖jQuery，所以要先在页面里引入jQuery：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

然后保留你的原有代码即可，注意检查元素ID是否和DOM里的一致。

换成原生JS（推荐，无需引入jQuery）： #

document.getElementById('menu-toggle').addEventListener('click', function(e) {
  e.preventDefault();
  document.getElementById('wrapper').classList.toggle('toggled');
});

4. 排查常见问题 #

如果还是没效果，检查这几点：

• CSS是否正确加载，有没有和其他样式冲突
• DOM元素的ID是否和代码里的完全匹配（比如#wrapper、#menu-toggle）
• 切换按钮如果不是<a>标签，e.preventDefault()可以去掉

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