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>
可以试试,如果有问题,欢迎提出,以便更正(1018967523@qq.com)