我正在开发一个自定义选择菜单，该菜单需要在用户单击文档的其他位置时关闭菜单选项。但是它没有这样做，我很困惑。同样，用户可以同时打开多个下拉菜单，这也是不希望的。有人可以解释我需要如何解决这个问题吗？
HTML
<body>
<div class="select">
<div class="arrow"></div>
<div class="option-menu">
<div class="option">Hello</div>
<div class="option">Goodbye</div>
</div>
</div>
<div class="select">
<div class="arrow"></div>
<div class="option-menu">
<div class="option">A</div>
<div class="option">B</div>
<div class="option">C</div>
</div>
</div>
</body>
JS
$(document).ready(function(){
var select = $(".select");
$(select).on("click", function(){
select = $(this);
$(this).find(".option-menu").each(function(){
$(this).toggle();
})
$(".option").on("click", function(){
$(select).children("p").remove();
var value = $(this).text();
$(select).prepend("<p>" +value +"<p>");
})
})
})
CSS
body{
background-color: rgb(200, 200, 200);
}
#main{
display: block;
float: left;
margin-top: 5%;
margin-left: 15%;
}
.select{
display: inline-block;
width: 250px;
height: 35px;
border-radius: 8px;
box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.5);
}
.arrow{
float: right;
margin-top: 10px;
margin-right: 5%;
height: 80%;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.option-menu{
display: none;
float: left;
margin-left: 5px;
width: 240px;
box-shadow: 0px 3px 3px 3px rgba(0, 0, 0, 0.5);
}
.option{
width: 100%;
cursor: pointer;
}
.active{
background-color: blue;
}
.select p{
position: relative;
float: left;
top: 10%;
left: 10%;
margin: 0;
padding: 0;
background-color: red;
}
这也是我的笔。
最佳答案
停止下拉事件的传播:
$('.option-menu').on('click', function(e) {
e.stopPropagation();
});
$('body').on('click', function(e) {
$(".option-menu").hide();
});
当您点击主体时，您告诉选项菜单关闭，但由于事件传播停止，当您在选项菜单内单击时，点击事件将永远不会到达主体。
PS:您的 codepen 示例对我不起作用，因此我无法提供有效示例。
关于javascript - 如何在用户单击页面上的其他位置时关闭自定义下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26404057/