参考下实现的代码~~~
在点击下拉以及选择item时阻止事件冒泡
然后为body添加一个click监听,当事件能冒泡到body时,关闭所有的pop下拉框
Titlebody{
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
}
.action-bar{
position: absolute;
left:0;
top:0;
width: 100%;
height: 50px;
background-color: lightgreen;
display: flex;
justify-content: flex-start;
align-items: center;
}
.select-wrap{
width: 100px;
height: 100%;
box-sizing: border-box;
padding-top: 5px;
padding-bottom: 5px;
position: relative;
padding-right: 10px;
padding-left: 10px;
position: relative;
}
.select-span{
width: 100%;
height: 100%;
border-radius: 5px;
border: 1px solid #cccccc;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.select-list{
display: none;
position: absolute;
left: 10px;
top: 50px;
width: 100px;
list-style: none;
padding: 5px;
margin: 0;
border: 1px solid red;
}
.select-wrap.active ul.select-list{
display: block;
}
ul.select-list{
list-style: none;
}
ul.select-list li{
background-color: grey;
background-color: grey;
margin-bottom: 5px;
overflow: hidden;
cursor: pointer;
}
$(function(){
$(".select-wrap .select-span").on("click",function(event){
$('body').find(".select-wrap").removeClass("active");
$(this).parents(".select-wrap").toggleClass("active");
event.stopPropagation();
addCloseAllSelectPopListener();
});
$(".select-wrap ").on("click","ul.select-list li",function(event){
console.log($(this).text()+" selected ");
$('body').find(".select-wrap").removeClass("active");
event.stopPropagation();
});
function addCloseAllSelectPopListener(){
$('body').on("click",function closeEventListener(event){
$('body').find(".select-wrap").removeClass("active");
$(event.currentTarget).off("click",closeEventListener);
});
}
});