js点击按钮和指定下拉元素以外的区域隐藏下拉内容

最新推荐文章于 2023-05-04 10:58:16 发布

原创最新推荐文章于 2023-05-04 10:58:16 发布 · 2.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #切换显示

JavaScript 专栏收录该内容

37 篇文章

订阅专栏

本文介绍了一个简单的JavaScript示例，通过按钮点击切换显示或隐藏一个div元素。此功能利用了DOM操作来实现元素的显示与隐藏，并且加入了对页面点击事件的监听，当点击页面其他位置时，会自动隐藏该div元素。

html

<button type="button" id="btn">切换显示下拉内容▼</button>
<div id="box" style="display:none;">内容框</div>

var btn = document.getElementById('btn');
var box = btn.nextSibling;
while (box.nodeType != 1) {
    box = moreBox.nextSibling;
}
btn.onclick = function() {
    if (box.style.display != 'block') {
        box.style.display = 'block';
    } else {
        box.style.display = 'none';
    }

    document.onclick = function(e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;

        while (target != box && target.parentNode && target != btn) {
            target = target.parentNode;
        }

        if (target != box && target != btn) {
            box.style.display = 'none';
        }
    };

};