我工作的自定义选择菜单，需要有菜单选项关闭时永远的用户点击了其他位置上的文件上。但是它没有这样做的，我很困惑。同样，用户可以有多个下拉菜单的同时打开，这也是这不是想要的东西。有人能解释我是如何解决这一问题？
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;
}
这也是我的笔。
你可以添加一些类来操作，像current然后就躲当前ELEM
$(this).find(".option-menu").each(function(){
$('.current').hide();
if ($(this).hasClass('current')){
$(this).removeClass('current');
}else{
$(this).show().addClass('current');
}
})
而隐藏你的菜单不点击它时
$(document).on('click',function(e){
if ( $(e.target).closest('.select').length === 0 ) {
$('.current').hide().removeClass('current');
}
})
停止在下拉事件的传播：
$('.option-menu').on('click', function(e) {
e.stopPropagation();
});
$('body').on('click', function(e) {
$(".option-menu").hide();
});
你告诉选项菜单关闭当你点击身体，但因为事件传播它停止，单击事件将永远不会到达全身，当您单击选项菜单内。
PS：您codepen例如不为我工作，所以我不能提供一个工作的例子。
In CoffeeScript, do something like this:
$('.more-btn').on 'click', (e) ->
if $('.card-content.more').hasClass('show-more-menu')
$('.card-content.more').removeClass('show-more-menu')
$(e.target).closest('.card-content.more').addClass('show-more-menu')
$(document).on 'click', ->
$(".card-content.more").removeClass('show-more-menu')
$('.card-content.more').on 'click', (e) ->
e.stopPropagation()