如何实现点击菜单链接或页面区域后自动关闭侧边栏

需求说明 #

需要实现以下交互逻辑：

• 点击菜单图标（☰）时，侧边栏展开显示
• 点击侧边栏内的菜单链接或页面body区域时，侧边栏自动收起关闭

原代码问题分析 #

原实现存在两个核心问题：

1. 点击侧边栏内部元素时，事件会向上冒泡到body，导致侧边栏被意外关闭
2. body的点击事件无条件触发，即使侧边栏已经关闭，仍会执行关闭逻辑

解决方案 #

通过以下两点修改修复问题：

• 阻止侧边栏内部事件冒泡：避免点击侧边栏内容时触发body的关闭逻辑
• 条件触发关闭操作：仅当侧边栏处于打开状态时，点击body才执行关闭

完整修复代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

<style>
/* 侧边栏基础样式 */
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: white;
  overflow-x: hidden;
  transition: 0.5s;
  border: 1px solid black;
}
.sidenav a {
  padding: 3px;
  margin: 5px;
  text-decoration: none;
  font-size: .9em;
  color: black;
  display: block;
  transition: 0.3s;
}
/* 菜单图标样式 */
.menu-toggle {
  font-size: 1.5em;
  cursor: pointer;
}
</style>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">cars</a>
  <a href="#">planes</a>
  <a href="#">boats</a>
  <a href="#">cycles</a>
</div>

<span class="menu-toggle" onclick="openNav()">&#9776;</span>

<body>
  <p>some random text some random textsome random textsome random text</p>
  <p>some random text some random textsome random textsome random text</p>
  <p>some random text some random textsome random textsome random text</p>
</body>

<script>
$(document).ready(function(){
    // 阻止侧边栏内部事件冒泡到body
    $('#mySidenav').on('click', function(e){
        e.stopPropagation();
    });

    // 点击body时，仅当侧边栏打开才执行关闭
    $('body').on('click', function(){
        if ($('#mySidenav').width() > 0) {
            closeNav();
        }
    });
}); 

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
</script>

关键修改说明 #

1. 事件冒泡阻止：为侧边栏添加点击事件，调用e.stopPropagation()，确保点击侧边栏内的链接、关闭按钮等元素时，事件不会传递到body，避免误触发关闭。
2. 条件关闭判断：在body的点击事件中，先检查侧边栏的宽度是否大于0（即是否处于打开状态），再执行关闭函数，避免无效操作。
3. 样式优化：给菜单图标添加独立类名.menu-toggle，提升代码可维护性。

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