右侧导航栏首次点击无响应及页面点击关闭功能实现求助

问题1：首次点击无响应的修复 #

初始状态下，导航栏宽度由CSS类.sidenav设置，而非内联样式，因此menu.style.width值为空。第一次点击时menu.style.width === '100px'判断不成立，代码会将宽度设为100px（和初始视觉状态一致），导致看起来无响应。

解决方式：改用CSS类切换控制展开/收起，更简洁易维护。

问题2：点击页面其他区域收起导航栏的实现 #

给document添加点击事件监听，判断点击目标是否属于导航栏内部元素，若不属于则收起导航栏。同时在导航栏的点击事件中阻止事件冒泡，避免点击导航栏时触发document的点击事件，导致刚展开就收起。

修改后的完整代码 #

HTML

<div id="mySidenav" class="sidenav">
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<div id="main">
  <!-- 页面其他内容示例 -->
  点击此处可收起导航栏
</div>

CSS

body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 100px;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

/* 新增展开状态类 */
.sidenav.expanded {
  width: 250px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

#main {
  transition: margin-right .5s; /* 适配右侧导航，修改过渡方向 */
  padding: 20px;
}

.sidenav a:hover {
  color: #f1f1f1;
}

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

JavaScript

window.addEventListener("load", onLoadHandler);

function onLoadHandler(e) {
  const side = document.getElementById("mySidenav");
  side.addEventListener("click", moveNav);
  // 绑定页面外部点击事件
  document.addEventListener("click", closeNavOnOutsideClick);
}

function moveNav(e) {
  // 阻止事件冒泡，避免触发document的点击回调
  e.stopPropagation();
  const menu = document.getElementById('mySidenav');
  // 切换展开/收起类
  menu.classList.toggle('expanded');
}

function closeNavOnOutsideClick(e) {
  const menu = document.getElementById('mySidenav');
  // 判断点击目标是否不在导航栏范围内
  if (!menu.contains(e.target)) {
    menu.classList.remove('expanded');
  }
}

关键修改说明 #

1. 类切换替代内联样式操作：用.expanded类控制宽度，规避了初始内联样式为空的问题，首次点击即可切换状态。
2. 阻止事件冒泡：在导航栏点击事件中调用e.stopPropagation()，防止事件传递到document，避免展开后立即收起的冲突。
3. 外部点击判断：通过menu.contains(e.target)检查点击目标归属，精准触发收起逻辑。
4. 页面过渡适配：将#main的margin-left改为margin-right，适配右侧导航栏展开时的页面偏移。

内容的提问来源于stack exchange，提问作者D.Mann