jq點擊元素之外關閉元素的共存問題
阿新 • • 發佈：2017-09-28
src pla 有一個 func jquery function tar win var
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])
jq點擊元素之外關閉元素的共存問題