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

Posted

技术标签:

【中文标题】如何在包含 div 元素的侧菜单之外的单击事件上关闭侧菜单？【英文标题】：How to close side menu on click event outside of side menu containing div element? 【发布时间】：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>
如果单击区域不包括菜单，菜单是否可以关闭

【问题讨论】：

所以要明确一点 - 您希望菜单在单击菜单之外的区域时关闭？ 是的，这就是我想要的。 可能重复：***.com/questions/49158756/… 这能回答你的问题吗？ jquery close on click outside 【参考方案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

【讨论】：

以上是关于如何在包含 div 元素的侧菜单之外的单击事件上关闭侧菜单？的主要内容，如果未能解决你的问题，请参考以下文章

在 div 下拉菜单之外单击时隐藏，但未显示切换

当我在菜单外单击时如何隐藏多个 jQuery toggle()？

给div添加单击事件，如何传递一个参数，比如数字？在事件函数中获取到div对象也行

出现在 div 之外的下拉菜单

Twitter bootstrap 在下拉菜单打开时停止传播

有条件地在 vue js 中绑定自定义指令以“在元素事件之外单击”