点击其他区域时隐藏元素

最新推荐文章于 2022-05-11 09:15:57 发布

Bright2017

最新推荐文章于 2022-05-11 09:15:57 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：网页中用到过的效果

本文链接：https://blog.youkuaiyun.com/Bright2017/article/details/78528551

网页中用到过的效果专栏收录该内容

138 篇文章

订阅专栏

本文介绍了一种通过点击文档来控制特定元素显示与隐藏的方法。利用jQuery实现点击效果，当点击目标输入框时，下方隐藏的区域会显示出来；点击页面其他部分时，该区域将再次隐藏。为避免点击该区域时触发隐藏功能，使用了stopPropagation()方法阻止事件冒泡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

思路很简单，点击整个document,让它隐藏，一层一层向上冒泡，当点击隐藏接触到当前区域时，也就是你不想被隐藏的区域，停止冒泡，阻止事件的传播即可。这里主要用到了stoppropagation()方法，不清楚的朋友可以去看看：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>