点击色块出现选择框，点击其他区域选择框消失

EstherNi

已于 2023-07-27 11:56:19 修改

阅读量480

点赞数

分类专栏： html-css-js 文章标签： html js css

于 2020-07-09 17:23:41 首次发布

本文链接：https://blog.csdn.net/EstherNi/article/details/107233633

版权

html-css-js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

效果：

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <style type="text/css"> * {
        margin: 0;
        padding: 0
    }

    a {
        display: inline-block;
        width: 50px;
        height: 50px;
        background: #f40;
        margin: 50px 0 0 50px;
    }

    div {
        margin: 60px 0 0 50px;
        padding: 20px;
        outline: none;
        border: 1px solid #39ee1a;
        border-radius: 5px;
        width: 200px;
    }

    </style>
</head>
<body>
<a id="search"></a>
<div id="searchBox"></div>
</body>
<script type="text/javascript">
    window.onload = function () {
        var obj = document.getElementById("searchBox");
        var oBtn = document.getElementById("search");
        searchBox.style.display = "none";
        oBtn.onclick = function () {
            obj.style.display = "block";
        }
        document.onclick = function (event) {
            //
            var e = event || window.event;//兼容ie和非ie的event
            var aim = e.srcElement || e.target; //兼容ie和非ie的事件源
            //
            if (e.srcElement) {
                var aim = e.srcElement;
                if (aim != oBtn && aim != obj) {
                    obj.style.display = "none";
                }
            } else {
                var aim = e.target;
                if (aim != oBtn && aim != obj) {
                    obj.style.display = "none";
                }
            }
        }
    }
</script>


</html>