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

html

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

js

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';
        }
    };

};