Question

如何在顶部菜单栏上写下这个网站的javascript，左键是“StackExchange”。当我点击它时，会显示一个框。当我点击其他地方时，该框将被关闭。

$('html').click(function() {

`var display_value = document.getElementById("message_box").style.display;`

`if(display_value == "block")`

    `document.getElementById("message_box").style.display = "none";`

});

function show_message_box(){ document.getElementById("message_box").style.display = "block"; }

谢谢！

Answer 1

显示该框，您可以执行以下操作:(假设该框显示：未分配任何样式）

 elem = document.getElementById(idOfWhatYouWantToClickOn)    
    elem.addEventListener ( 
            'click', 
            function() {
                document.getElementById(idOfBoxYouWantToHide).style.display = 'block'
            }, 
                false);

为了隐藏我不确定，您可以尝试将eventListener添加到文档中，最好在上面的函数内部（这样只有在框打开时才会添加），隐藏框并在之后删除它。我不确定，如果在文档上添加eventhandler将真正捕获文档中的所有点击。所以它看起来有点像这样:(这是伪代码！它不会像那样工作，它只是一般的想法，请自己解决细节，它应该给你很多搜索的东西）< / p>

elem = document.getElementById(idOfWhatYouWantToClickOn)    
elem.addEventListener ( 
    'click', 
    showBox, 
    false
);

function showBox(){
    document.getElementById(idOfBoxYouWantToHide).style.display = 'block';
    document.addEventListener ( 
        'click', 
        hideBox, 
                false
    );
}

function hideBox( ev ) {
    if (( ev.target.id != idOfWhatYouWantToClickOn) && (ev.target.id != idOfBoxYouWantToShowHide) )                     
    document.getElementById(idOfBoxYouWantToShowHide).style.display = 'none';
    document.RemoveEventListener('click',hideBox);
}

点击其他地方的javascript关闭框

1 个答案: