点击其他区域时隐藏元素

不念不忘少年蓝@ 2022-06-05 01:26 267阅读 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

发表评论取消回复

表情：

评论列表（有 0 条评论，267人围观）

还没有评论，来说两句吧...

相关阅读

相关 js点击其他地方隐藏

js点击其他地方隐藏： <div class="container"> <button id="clickMe">click me</button>

刺骨的言语ヽ痛彻心扉/ 2023年07月10日 15:34/ 0 赞/ 13 阅读

相关点击按钮时div显示再次点击时隐藏（白天夜间切换）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4u

左手的ㄟ右手/ 2022年10月02日 00:46/ 0 赞/ 247 阅读

相关点击显示再次点击隐藏

<script> $(function()\{ $('\a').click(function()\{//点击a标签 if($('

亦凉/ 2022年06月07日 09:06/ 0 赞/ 374 阅读

相关点击其他区域时隐藏元素

效果说明，除了当前区域外，点击其他任何地方，都会让当前元素区域隐藏。思路很简单，点击整个document,让它隐藏，一层一层向上冒泡，当点击隐藏接触到当前区域时，也就是你不

不念不忘少年蓝@/ 2022年06月05日 01:26/ 0 赞/ 268 阅读

相关实现点击页面其他地方，隐藏div（vue）

方法一：　　　　通过监听事件 document.addEventListener('click',function(e){

布满荆棘的人生/ 2022年05月09日 09:34/ 0 赞/ 426 阅读

相关点击其他区域，隐藏div

<div id='test'></div> 点击其他区域关闭这个div <script type="text/javascript"> $(document).bi

亦凉/ 2022年05月04日 03:58/ 0 赞/ 318 阅读

相关除指定区域外点击任何地方隐藏DIV

方式一: <div class="btn" id="btn">btn</div> <div class="box"></div>

短命女/ 2022年04月04日 05:17/ 0 赞/ 291 阅读

相关实现点击空白区域隐藏下拉弹窗

背景 -------------------- 中后台项目依赖Element UI 组件库，组件库中Select 选择器、Popover 弹出框等组件弹出内容后，点击组

青旅半醒/ 2022年02月20日 12:55/ 0 赞/ 1328 阅读

相关除指定区域外点击任何地方隐藏DIV

html如下： <div class="btn" id="btn">btn</div> <div class="box"></div> jq

约定不等于承诺〃/ 2021年09月11日 08:38/ 0 赞/ 329 阅读

相关 vue自定义点击空白隐藏其他标签

<div class="head\_right" v-clickoutside="outsideClose"> <div c

╰+攻爆jí腚メ/ 2021年09月08日 16:42/ 0 赞/ 331 阅读