点击其他区域时隐藏元素

不念不忘少年蓝@ 2022-06-05 01:26 283阅读 0赞

效果说明，除了当前区域外，点击其他任何地方，都会让当前元素区域隐藏。

思路很简单，点击整个document,让它隐藏，一层一层向上冒泡，当点击隐藏接触到当前区域时，也就是你不想被隐藏的区域，停止冒泡，阻止事件的传播即可。这里主要用到了stoppropagation()方法，不清楚的朋友可以去看看：[http://www.w3school.com.cn/jsref/event\_stoppropagation.asp][http_www.w3school.com.cn_jsref_event_stoppropagation.asp]

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .hide{ display: none; } .MultiProvincesHide{ width: 173px; height: 100px; line-height: 100px; border: 1px solid #999; } </style> </head> <body> <div class="MultiProvinces"> <input type="text" placeholder="请选择省份" id="MultiProvincesTop" /> <input type="hidden" id="MultiProvincesBottom" name="city" /> <div class="MultiProvincesHide hide"> 啦啦啦啦啦啦 </div> </div> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#MultiProvincesTop").click(function (e) { var className = $(".MultiProvincesHide").attr("class"); if (className.indexOf("hide") > -1) { $(".MultiProvincesHide").removeClass("hide"); } else { $(".MultiProvincesHide").addClass("hide"); } $(document).one("click", function () { $(".MultiProvincesHide").addClass("hide"); }); e.stopPropagation(); }); $(".MultiProvincesHide").on("click", function (e) { e.stopPropagation(); }); }); </script> </body> </html>

[http_www.w3school.com.cn_jsref_event_stoppropagation.asp]: http://www.w3school.com.cn/jsref/event_stoppropagation.asp