[英]How to close the dropdown if the user clicks outside of it?
I am making user dropdown when we click on the picture we get a dropdown or a card.当我们点击图片时,我正在制作用户下拉菜单,我们会得到一个下拉菜单或一张卡片。 I want to close it when user click outside of dropdown.
当用户在下拉菜单之外单击时,我想关闭它。 The code of closing will be in JavaScript.
关闭代码将使用 JavaScript。 Please solve this problem.
请解决这个问题。 I think there will be a remove function in JavaScript which will remove the dropdown after clicking on it.
我认为 JavaScript 中会有一个删除功能,它会在点击下拉菜单后删除它。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple popup menu</title>
<style>
body {
margin: 0;
background: tomato;
font-family: 'Open Sans', sans-serif;
}
.menubtn {
cursor: pointer;
width: 40px;
height: 20px;
right: 10px;
top: 10px;
position: absolute;
}
.userimg {
border-radius: 50%;
height: 35px;
width: 35px;
}
.navmenu {
width: 150px;
border-radius: 10px;
margin-top: 30px;
background: #fff;
position: absolute;
right: 18px;
top: 25px;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
z-index: 10;
visibility: hidden;
opacity: 0;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.navmenu.opened {
visibility: visible;
opacity: 1;
}
.navmenu::before {
content: '';
position: absolute;
top: -5px;
right: 7px;
width: 15px;
height: 15px;
background: #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.navmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.navmenu ul.text-list {
text-align: left;
font-weight: 100;
width: 100%;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
}
.navmenu ul.text-list li a {
text-decoration: none;
padding-left: 20px;
padding-top: 5px;
color: #343434;
font-weight: 600;
display: block;
line-height: 27px;
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
}
.navmenu ul.text-list li a:hover {
color: tomato;
}
</style>
</head>
<body>
<div class="menubtn">
<span>
<img class="userimg" src="http://tryma.in/images/user/default.png"/>
</span>
</div>
<div class="navmenu">
<ul class="text-list">
<li><a href="#">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('.menubtn').on('click', function() {
$('.navmenu').toggleClass('opened');
});
</script>
</body>
</html>
Please help me in solving this code.
请帮助我解决此代码。 Thank You
谢谢你
opened
class on click of document.opened
类。e.stopPropagation()
so that event does not propagate on document
which event is invoked on click of the .menubtn
e.stopPropagation()
以便事件不会在单击.menubtn
调用哪个事件的document
上传播 $('.menubtn').on('click', function(e) { e.stopPropagation(); $('.navmenu').toggleClass('opened'); }); $(document).on('click', function() { $('.navmenu').removeClass('opened'); });
body { margin: 0; background: tomato; font-family: 'Open Sans', sans-serif; } .menubtn { cursor: pointer; width: 40px; height: 20px; right: 10px; top: 10px; position: absolute; } .userimg { border-radius: 50%; height: 35px; width: 35px; } .navmenu { width: 150px; border-radius: 10px; margin-top: 30px; background: #fff; position: absolute; right: 18px; top: 25px; box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15); z-index: 10; visibility: hidden; opacity: 0; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .navmenu.opened { visibility: visible; opacity: 1; } .navmenu::before { content: ''; position: absolute; top: -5px; right: 7px; width: 15px; height: 15px; background: #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .navmenu ul { list-style: none; margin: 0; padding: 0; } .navmenu ul.text-list { text-align: left; font-weight: 100; width: 100%; margin: auto; padding-top: 10px; padding-bottom: 10px; } .navmenu ul.text-list li a { text-decoration: none; padding-left: 20px; padding-top: 5px; color: #343434; font-weight: 600; display: block; line-height: 27px; -webkit-transition: all 200ms ease; transition: all 200ms ease; } .navmenu ul.text-list li a:hover { color: tomato; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="menubtn"> <span> <img class="userimg" src="http://tryma.in/images/user/default.png"/> </span> </div> <div class="navmenu"> <ul class="text-list"> <li><a href="#">Home</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.