如何在包含 div 元素的侧菜单之外的单击事件上关闭侧菜单？答案

【问题标题】：How to close side menu on click event outside of side menu containing div element?如何在包含 div 元素的侧菜单之外的单击事件上关闭侧菜单？
【发布时间】：2020-07-08 04:02:38
【问题描述】：

点击汉堡图标后，出现菜单，如果我点击了排除菜单的地方，菜单如何关闭？我使用 jQuery 是因为我的 javascript 不好。我不知道我的问题是否只能使用 javascript 来解决。请帮我解决我的问题。谢谢。

$(document).ready(function(){
  $('i.fa-bars').on('click', function(){
    $(this).toggleClass('active');
    $('ul').css({
      'transform': 'translateX(0px)',
      'box-shadow': '5px 5px 5px #ddd'
    });
  });
});

*{
  padding: 0;
  margin: 0;
  font-family: 'Poppins', sans-serif;
}
i.fa-bars{
  margin: 20px;
  border-radius: 50%;
  padding: 10px;
  transition: .3s;
  position: absolute;
}
i.fa-bars.active{
  background-color: rgb(216, 216, 216);
}
i.fa-bars.active:hover{
  background-color: rgb(216, 216, 216);
}
i.fa-bars:hover{
  background-color: #eee;
}
ul{
  position: absolute;
  background-color: #fff;
  width: 200px;
  height: 100vh;
  color: rgb(77, 77, 77);
  transform: translateX(-200px);
  transition: .4s;
}
ul li:nth-child(1){
  background: #eee;
  margin: 5px 5px 0 0;
  padding: 20px 0 20px 0;
  border-radius: 0 40px 40px 0;
}
ul li:nth-child(2){
  margin: 0px 5px 0 0;
  padding: 20px 0 20px 0;
  border-radius: 0 40px 40px 0;
  transition: .3s;
}
.project{
  margin: 0 0 0 20px;
}
ul li:nth-child(2):hover{
  background: rgb(207, 226, 255);
}
.line{
  width: 200px;
  height: 1px;
  background: #414141;
  margin: 5px 0;
}
ul li:nth-child(4){
  margin: 0px 5px 0 0;
  padding: 20px 0 20px 0;
  border-radius: 0 40px 40px 0;
  transition: .3s;
}
ul li:nth-child(4):hover{
  background: rgb(207, 226, 255);
}
ul li{
  display: flex;
}
ul li p{
  margin: 0 0 0 10px;
}
.fa-home, .fa-file, .fa-cog{
  font-size: 25px;
  margin: 0 0 0 10px;
}
.word{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.fa-file{
  transform: translateX(4px);
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Side Menu</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://kit.fontawesome.com/5c25faca78.js" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <i class="fas fa-bars"></i>
    <ul>
      <li><i class="fas fa-home"></i><p>Home</p></li>
      <li><i class="fas fa-file"></i><p class="project">Projects</p></li>
      <div class="line"></div>
      <li><i class="fas fa-cog"></i><p>Settings</p></li>
    </ul>
    <p class="word">Click the hamburger menu</p>
    <script src="script.js"></script>
  </body>
</html>

如果单击区域不包括菜单，菜单是否可以关闭

【问题讨论】：

所以要明确一点 - 您希望菜单在单击菜单之外的区域时关闭？
是的，这就是我想要的。
可能重复：stackoverflow.com/questions/49158756/…
这能回答你的问题吗？ jquery close on click outside

标签： javascript jquery html css menu

【解决方案1】：

我认为在你的窗口中添加一个事件监听器是可以的 (window.addEventListener('click', function(e))，你不需要jQuery。

window.addEventListener('click', function(e){
    if (!document.getElementById("_id").contains(e.target) && (!document.getElementById('_idd').contains(e.target))){
     document.getElementById('_id').style="left: 0px";
  } 
})

$(document).ready(function(){
  $('i.fa-bars').on('click', function(){
    $(this).toggleClass('active');
    $('ul').css({
      'transform': 'translateX(0px)',
      'box-shadow': '5px 5px 5px #ddd'
    });
  });
});

*{
  padding: 0;
  margin: 0;
  font-family: 'Poppins', sans-serif;
}
i.fa-bars{
  margin: 20px;
  border-radius: 50%;
  padding: 10px;
  transition: .3s;
  position: absolute;
}
i.fa-bars.active{
  background-color: rgb(216, 216, 216);
}
i.fa-bars.active:hover{
  background-color: rgb(216, 216, 216);
}
i.fa-bars:hover{
  background-color: #eee;
}
ul{
  position: absolute;
  background-color: #fff;
  width: 200px;
  height: 100vh;
  color: rgb(77, 77, 77);
  transform: translateX(-200px);
  transition: .4s;
}
ul li:nth-child(1){
  background: #eee;
  margin: 5px 5px 0 0;
  padding: 20px 0 20px 0;
  border-radius: 0 40px 40px 0;
}
ul li:nth-child(2){
  margin: 0px 5px 0 0;
  padding: 20px 0 20px 0;
  border-radius: 0 40px 40px 0;
  transition: .3s;
}
.project{
  margin: 0 0 0 20px;
}
ul li:nth-child(2):hover{
  background: rgb(207, 226, 255);
}
.line{
  width: 200px;
  height: 1px;
  background: #414141;
  margin: 5px 0;
}
ul li:nth-child(4){
  margin: 0px 5px 0 0;
  padding: 20px 0 20px 0;
  border-radius: 0 40px 40px 0;
  transition: .3s;
}
ul li:nth-child(4):hover{
  background: rgb(207, 226, 255);
}
ul li{
  display: flex;
}
ul li p{
  margin: 0 0 0 10px;
}
.fa-home, .fa-file, .fa-cog{
  font-size: 25px;
  margin: 0 0 0 10px;
}
.word{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.fa-file{
  transform: translateX(4px);
}

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Side Menu</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://kit.fontawesome.com/5c25faca78.js" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <i class="fas fa-bars" id="_idd"></i>
    <ul id="_id">
      <li><i class="fas fa-home"></i><p>Home</p></li>
      <li><i class="fas fa-file"></i><p class="project">Projects</p></li>
      <div class="line"></div>
      <li><i class="fas fa-cog"></i><p>Settings</p></li>
    </ul>
    <p class="word">Click the hamburger menu</p>
    <script src="script.js"></script>
  </body>

CodePen：https://codepen.io/marchmello/pen/OJVryvE

【讨论】：