求助：实现点击菜单链接或外部区域关闭侧边菜单

需求说明 #

已实现适配桌面与移动端的侧边菜单，当前仅支持通过点击菜单按钮切换显示/隐藏，需要新增以下功能：

• 点击菜单内的链接时自动关闭菜单
• 点击菜单外部区域时自动关闭菜单

解决方案步骤 #

1. 修正CSS显示问题 #

原CSS存在重复定义与属性错误，导致菜单默认状态与显示状态的样式冲突，修正后的代码如下：

/* Sidebar */
#sidebar-wrapper1{
  z-index:1;
  position: absolute;
  padding-right: 0;
  margin-top:15rem;
  margin-right: -200px;
  width:0;
  right: 200px;
  height:60rem;
  overflow-y:hidden;
  background: white;
  opacity:0.8;
  transition:all .5s;
  display:none; /* 修正大小写，默认隐藏菜单 */
  align-items:flex-start; /* 替换无效的left值，设置内容左对齐 */
}

/* Main Content */
#page-content-wrapper{
  width: 100%;  
  position: absolute;
  margin-top:12rem;
  padding:15px;
  transition:all .5s;
  right: 7px;
}

#menu-toggle{
  transition:all .3s;
  font-family:"Nitti", monospaced;
  font-size:1.5rem;
  float: right;
}

/* 菜单显示状态样式 */
#wrapper1.menuDisplayed #sidebar-wrapper1{
  width:200px;
  display:flex; /* 恢复菜单的显示属性 */
}

#wrapper1.menuDisplayed #page-content-wrapper{
  padding-right:200px;
}

2. 扩展JavaScript交互逻辑 #

通过事件绑定与冒泡处理，实现目标功能：

$(document).ready(function(){
  // 菜单按钮切换逻辑
  $("#menu-toggle").click(function(e){
    e.preventDefault();
    e.stopPropagation(); // 阻止事件冒泡，避免触发全局关闭逻辑
    $("#wrapper1").toggleClass("menuDisplayed");
  });

  // 点击菜单内链接关闭菜单
  $(".sidebar-nav1 a").click(function(){
    $("#wrapper1").removeClass("menuDisplayed");
  });

  // 点击外部区域关闭菜单
  $(document).click(function(e){
    var sidebar = $("#sidebar-wrapper1");
    var toggleBtn = $("#menu-toggle");
    // 判断点击区域是否在菜单和按钮之外，且菜单处于显示状态
    if(!sidebar.is(e.target) && sidebar.has(e.target).length === 0 && !toggleBtn.is(e.target)){
      $("#wrapper1").removeClass("menuDisplayed");
    }
  });
});

3. HTML结构保持不变 #

无需调整原有HTML结构，直接使用即可：

<div id="wrapper1" class="menuDisplayed">
    <!-- Sidebar -->
    <div id="sidebar-wrapper1">
      <ul class="sidebar-nav1">
        Texts
        <li><a href="sweater" rel="history" data-tags="link1">Link1</a></li>
        <li><a href="cardigan" rel="history" data-tags="link2">link2</a></li>
      </ul>
    </div>
    
    <!-- Page Content -->
    <div id="page-content-wrapper">
      <div class="">
        <div class="">
          <div class="">
            <a href="#" id="menu-toggle" class="icon-link">︎&nbsp;</a>    
          </div>
        </div>
      </div>
    </div>
</div>

功能验证 #

• 点击菜单按钮仍可正常切换菜单显示/隐藏状态
• 点击菜单内任意链接，菜单自动关闭
• 点击页面除菜单、菜单按钮外的任意区域，菜单自动关闭

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