jquery实现点击当前元素之外的地方隐藏，点击当前元素显示

最新推荐文章于 2021-08-02 09:01:49 发布

weixin_34256074

最新推荐文章于 2021-08-02 09:01:49 发布

阅读量1.1k

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript xhtml python ViewUI

原文链接：https://my.oschina.net/yonghan/blog/842948

本文介绍了一种使用JavaScript和HTML实现点击按钮后显示隐藏层的方法。通过jQuery简化DOM操作，当点击指定按钮时，隐藏的层会显示出来，并且当点击页面其他区域时，该层会再次隐藏。

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

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
    <title>点击一个连接显示层</title>
    <style type="text/css">
        #myDiv{
            border:1px solid #000000;
            width:200px;
            height:100px;
            background:#cccccc;
        }
    </style>
    <script  src="http://www.jq22.com/demo/qqFace/js/jquery.min.js"></script>
    <script language="JavaScript" type="text/javascript">


        $(function(){
            $("#showDiv").click(function(e){
                $("#myDiv").show();
                e.stopPropagation();
            });
            $("#myDiv").click(function(e){
                e.stopPropagation();
            });
            $(document.body).click(function(){
                $("#myDiv").hide();
            });
        });


    </script>
</head>
<body>
<div id="myDiv" style="display:none;">就等你包养了</div>
<input type="button" value="快来摸我" id="showDiv" />
</body>
</html>

转载于:https://my.oschina.net/yonghan/blog/842948