单击时显示元素,单击其他div时隐藏

时间:2014-07-28 07:24:19

标签: javascript

标题说明了一切。 单击时显示元素没有问题。

但是每当我点击其他地方时我都想隐藏它。 一个很好的例子是' StackExchange'标签在本网站的标题中。 当我点击它时,它会显示其他选项。 但当我点击其他地方时,它会隐藏。

3 个答案:

答案 0 :(得分:0)

window.onclick = function() { alert('it was so simple, wasn\'t it?'); };

答案 1 :(得分:0)

您可以在点击某些内容时添加点击事件,并判断它是否属于html:

function addListener(element, e, fn) {  //add event function,browser compatible
    if (element.addEventListener) {
        element.addEventListener(e, fn, false);
    } else {
        element.attachEvent("on" + e, fn);
    }
}
addListener(document, "click",
function(evt) {
    var evt = window.event ? window.event: evt,
    target = evt.srcElement || evt.target;
    if (target.id == "showDiv") {  //the div you want to show 
        document.getElementById("myDiv").style.display = "";
        return;
    } 
    else {
        //judge target belongs to html or not,You may change condition here
        while (target.nodeName.toLowerCase() != "div" && target.nodeName.toLowerCase() != "html") {  
            target = target.parentNode;
        }
        if (target.nodeName.toLowerCase() == "html") {
            document.getElementById("myDiv").style.display = "none";
        }

    }
})

答案 2 :(得分:0)

Michal Leszczyk是对的,使用窗口处理程序来隐藏div

在单击时显示div时也使用event.stopPropagation()。为了防止同时隐藏它