[英]How to close the dropdown if the user clicks outside of it?
当我们点击图片时,我正在制作用户下拉菜单,我们会得到一个下拉菜单或一张卡片。 当用户在下拉菜单之外单击时,我想关闭它。 关闭代码将使用 JavaScript。 请解决这个问题。 我认为 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>
请帮助我解决此代码。 谢谢你
opened
类。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.