如何实现桌面端Side Nav默认展开、移动端默认收起？设置active类无效

你当前的代码只添加了active类和切换逻辑，但缺少对应的CSS样式来控制侧边栏的显示/隐藏，也没做响应式的默认状态区分，所以加了active类也看不到预期效果。下面是完整的修改方案：

1. 添加CSS样式控制侧边栏状态 #

在<head>标签内插入<style>，写入以下样式：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  height: 100vh;
}

/* 侧边栏基础样式 */
.sidebar {
  width: 250px;
  background: #2c3e50;
  color: #fff;
  transition: width 0.3s ease;
  padding: 1rem 0;
}

.sidebar .profile {
  text-align: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid #34495e;
}

.sidebar img {
  width: 60px;
  border-radius: 50%;
  margin-bottom: 0.5rem;
}

.sidebar ul {
  list-style: none;
  margin-top: 1rem;
}

.sidebar ul li a {
  display: flex;
  align-items: center;
  padding: 0.8rem 1rem;
  color: #fff;
  text-decoration: none;
  gap: 1rem;
}

.sidebar ul li a:hover {
  background: #34495e;
}

/* 顶部导航栏样式 */
.top_navbar {
  background: #34495e;
  padding: 1rem;
}

.hamburger a {
  color: #fff;
  font-size: 1.2rem;
}

/* 移动端默认收起（屏幕≤768px） */
@media (max-width: 768px) {
  .sidebar {
    width: 70px;
  }
  .sidebar .item,
  .sidebar h3,
  .sidebar p {
    display: none;
  }
  /* 点击汉堡菜单后展开 */
  body.active .sidebar {
    width: 250px;
  }
  body.active .sidebar .item,
  body.active .sidebar h3,
  body.active .sidebar p {
    display: block;
  }
}

/* 桌面端默认展开（屏幕>768px） */
@media (min-width: 769px) {
  .sidebar {
    width: 250px;
  }
  .sidebar .item,
  .sidebar h3,
  .sidebar p {
    display: block;
  }
  /* 点击汉堡菜单后收起 */
  body:not(.active) .sidebar {
    width: 70px;
  }
  body:not(.active) .sidebar .item,
  body:not(.active) .sidebar h3,
  body:not(.active) .sidebar p {
    display: none;
  }
}

2. 调整HTML初始状态 #

移除<body>标签上的active类，因为默认状态由媒体查询控制：

<body>
    <div class="wrapper">
        <div class="section">
            <div class="top_navbar">
                <div class="hamburger">
                    <a href="#">
                        <i class="fas fa-bars"></i>
                    </a>
                </div>
            </div>
        </div>
        
        <div class="sidebar">
            <div class="profile">
                <div class="brandcolor">
                    <img src="image/logo.png" alt="profile_picture">
                    <h3><b>Dashboard</b></h3>
                    <p><b>admin</b></p>
                </div>
            </div>
            <ul>
                <li>
                    <a href="#">
                        <span class="icon"><i class="fas fa-desktop"></i></span>
                        <span class="item">My Dashboard</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
  <script>
       var hamburger = document.querySelector(".hamburger");
    hamburger.addEventListener("click", function(){
        document.querySelector("body").classList.toggle("active");
    })
  </script>
</body>

效果说明 #

• 桌面端（屏幕宽度>768px）：侧边栏默认展开，点击汉堡图标可收起
• 移动端（屏幕宽度≤768px）：侧边栏默认收起，点击汉堡图标可展开

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