1.首先第一个想到的是阻止事件冒泡;
随便写的css;
.select-wrap, .select-wrap1{
position: relative;
width: 100px;
border: 1px solid #000;
}
.select-wrap1{
margin-top: 100px;
}
.select-list{
display: none;
position: absolute;
border: 1px solid red;
top: 100%;
left: 0
}
<div class="select-wrap">
<div class="select-span">
<span>选择一个</span>
</div>
<ul class="select-list">
<li>1111111111</li>
<li>2222222222</li>
<li>3333333333</li>
</ul>
</div>
<script>
$(".select-wrap .select-span").click(function(e){
e.stopPropagation();
$(".select-wrap .select-list").slideToggle();
});
$(document).click(function(e) {
$(‘.select-wrap‘).find(‘.select-list‘).slideUp();
});
</script>
这样写当有一个的时候没什么问题,但是当有两个以上的时候有点问题
<div class="select-wrap">
<div class="select-span">
<span>选择一个</span>
</div>
<ul class="select-list">
<li>1111111111</li>
<li>2222222222</li>
<li>3333333333</li>
</ul>
</div>
<div class="select-wrap1">
<div class="select-span">
<span>选择一个</span>
</div>
<ul class="select-list">
<li>1111111111</li>
<li>2222222222</li>
<li>3333333333</li>
</ul>
</div>
<script>
$(".select-wrap .select-span").click(function(e){
e.stopPropagation();
$(".select-wrap .select-list").slideToggle();
});
$(".select-wrap1 .select-span").click(function(e){
e.stopPropagation();
$(".select-wrap1 .select-list").slideToggle();
});
$(document).click(function(e) {
$(‘.select-wrap‘).find(‘.select-list‘).slideUp();
$(‘.select-wrap1‘).find(‘.select-list‘).slideUp();
});
</script>
我们发现,点击第二个的时候,第一个应该是要关闭的,但是并没有(反之亦然),其实是点击了凡是阻止事件冒泡的元素,都不会关闭,
点击没有事件冒泡的地方才会关闭;
我是这样解决这个问题的,可能还有其他更好的解决方法
下面是完整代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.select-wrap, .select-wrap1{
position: relative;
width: 100px;
border: 1px solid #000;
}
.select-wrap1{
margin-top: 100px;
}
.select-list{
display: none;
position: absolute;
border: 1px solid red;
top: 100%;
left: 0
}
</style>
</head>
<body>
<div class="select-wrap">
<div class="select-span">
<span>选择一个</span>
</div>
<ul class="select-list">
<li>1111111111</li>
<li>2222222222</li>
<li>3333333333</li>
</ul>
</div>
<div class="select-wrap1">
<div class="select-span">
<span>选择一个</span>
</div>
<ul class="select-list">
<li>1111111111</li>
<li>2222222222</li>
<li>3333333333</li>
</ul>
</div>
</body>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script>
$(".select-wrap .select-span").click(function(){
$(".select-wrap .select-list").slideToggle();
});
$(".select-wrap1 .select-span").click(function(){
$(".select-wrap1 .select-list").slideToggle();
});
//
$(".select-wrap .select-list li").on(‘click‘, function (e) {
e.stopPropagation();
$(this).parents(‘.select-wrap‘).find(‘span‘).html($(this).html());
$(this).parents(‘.select-wrap‘).find(‘.select-list‘).slideUp();
$(".select-wrap1 .select-list").slideDown(‘fast‘, ‘swing‘);
})
$(".select-wrap1 .select-list li").on(‘click‘, function (e) {
e.stopPropagation();
$(this).parents(‘.select-wrap1‘).find(‘span‘).html($(this).html());
$(this).parents(‘.select-wrap1‘).find(‘.select-list‘).slideUp();
})
$(document).click(function(e) {
var target = $(e.target);
if(target.closest(".select-wrap").length == 0) {
$(".select-wrap .select-list").slideUp();
};
if (target.closest(‘.select-wrap1‘).length == 0) {
$(‘.select-wrap1 .select-list‘).slideUp(‘fast‘, ‘swing‘);
};
});
</script>
</html>
可以试试,如果有问题,欢迎提出,以便更正([email protected])
时间： 2024-10-14 05:39:25