js/jq点击下拉列表按钮，显示，点击其他地方（包括下拉按钮）隐藏下拉列表

最新推荐文章于 2024-07-06 14:43:30 发布

lsx19981201

最新推荐文章于 2024-07-06 14:43:30 发布

阅读量3.8k

点赞数 2

本文链接：https://blog.csdn.net/lsx19981201/article/details/86670609

版权

当时想写一个这样的按钮不会写，纵观很多博客，要求不符合或者效果不能很好地实现出来，然后看了很多，找到了一个比较符合的，但是博主写的点击下拉列表按钮的时候，下拉列表不能隐藏，存在缺陷，故加以修正。也把这个保存下来，留作笔记，以备后用。

以下是代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="../libs/jquery-3.3.1/jquery-3.3.1.min.js"></script>
    <title>无标题文档</title>
    <style type="text/css">
        #pop {
            border: #000;
            background-color: #CCC;
            position: absolute;
            left: 50px;
            top: 50px;
            width: 200px;
            height: 500px;
            display: none;
        }

        #btn {
            color: #f00;
        }
    </style>
</head>
<body>
    <button id="btn">打开层</button>
    <div>aa</div>
    <div>aa</div>

    <div id="pop">
        浮层，点击这个浮层以外的区域，都可以隐藏这个浮层
        <p>
            <a href="javascript:;">最主要的是点这个div里面的链接，div照样不隐藏</a>
        </p>
    </div>
</body>
</html>
<script type="text/javascript">
    



    function $(id) { return document.getElementById(id); }
    window.onload = function () {
        document.onclick = function (e) {
            $("pop").style.display = "none";
        }
        $("btn").onclick = function (e) {
            // $("pop").style.display = "block";
             var pop=document.getElementById("pop");
            if(pop.style.display=="block"){
                //对当前状态的判断
                $("pop").style.display="none";
            }else{
                $("pop").style.display="block";
            }
            e = e || event; stopFunc(e);
        }
        $("pop").onclick = function (e) {
            e = e || event; stopFunc(e);
        }
    }
    function stopFunc(e) {
        e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
    }
   // 阻止冒泡事件
    
    //jquery目前不能实现效果来着
    // $("#btn").on("click", function(e){
    //     $("#pop").show();

    //     $(document).on("click", function(){
    //         $("pop").hide();
    //     });

    //     e.stopPropagation();
    // });
    // $("pop").on("click", function(e){
    //     e.stopPropagation();
    // });

</script>