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

Question

After I clicked the hamburger icon, the menu appears, how can the menu close if I clicked places excluded the menu?单击汉堡图标后，出现菜单，如果单击排除菜单的位置，菜单如何关闭？ I used jQuery because my javascript is not good.我使用 jQuery 因为我的 javascript 不好。 I don't know if my question can only be solved using javascript.我不知道我的问题是否只能使用 javascript 来解决。 Please help me to solve my question.请帮我解决我的问题。 Thank you.谢谢你。

 $(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>

Can the menu closed if area excludes the menu is clicked 如果单击排除菜单的区域，菜单是否可以关闭

Answer 1

I think adding an event listener to your window will be okay ( window.addEventListener('click', function(e) ), you don't need jQuery .我认为向您的窗口添加一个事件侦听器就可以了（ 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 https://codepen.io/marchmello/pen/OJVryvE

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

问题描述

1 个解决方案

解决方案1
1 2020-03-27 12:26:07

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

问题描述

1 个解决方案

解决方案1 1 2020-03-27 12:26:07

解决方案1
1 2020-03-27 12:26:07