Question

我基本上试图在用户点击任何地方时关闭打开的菜单。我是新的，我不知道什么是问题。到目前为止我使用的是这段代码，这里是我的html，css和javaScript。我认为问题出在我的JavaScript中。

感谢您的帮助。

HTML

<div class="menu-button" style="width:23px; cursor: pointer;" onClick="show_menu()"><span style="color:#b0acac;">&#9660;</span></div>
<div id="dropdown_menu" class="hidden_menu">
    <ul id="container">
        <li>Settings<br></li>
        <li>Log Out</li>
    </ul>           
</div>

CSS

.menu-button{
position: relative;
left:1556px;
top:-43px;

}

.hidden_menu{
display:none

}

#dropdown_menu ul li {
text-decoration:none;
display: inline;
cursor: pointer;
position: relative;
left:-20px;
top:2px;

}
#dropdown_menu ul{
width:80px;
height:90px;
background-color:#efefef;
position:relative;
top:-64px;
left:1460px;
border-color:#ff0000;
border-width:2px;

}

的JavaScript

<script>
function show_menu(){
    var menu = document.getElementById('dropdown_menu');

    if(menu.style.display == 'block'){
        menu.style.display = 'none';
    }else {
        menu.style.display = 'block';                    
    }
}
function hide_menu(){

    var menu = document.getElementById('dropdown_menu');
    if(menu.style.display == 'none'){
        menu.style.display = 'block';
    }
}
var cl = document.getElementById("body");
cl.addEventListener("click", hide_menu);
</script>

Answer 1

这可以帮到你。

HTML代码

<div class="menu-button" style="width:23px; cursor: pointer;" ><span id="button" style="color:#b0acac;">Show Menu</span></div>
<div id="dropdown_menu" class="hidden_menu">
    <ul id="container">
        <li>Settings<br></li>
        <li>Log Out</li>
    </ul>           
</div>

<强>的CSS

.hidden_menu { display:none;}

JavaScript代码

var dropMenu = document.getElementById('dropdown_menu'),
    menuButton = document.getElementById('button'),
    dropUL = document.getElementById('container').childNodes;

function hide_menu(evt){

    evt = evt || window.event;                        // get window.event if evt is falsy (IE)
    var targetElement = evt.target || evt.srcElement; // get srcElement if target is falsy (IE)

    if(targetElement === menuButton || targetElement.nodeName.toLowerCase() === 'li' ){
        dropMenu.style.display = 'block'
    } else {
        dropMenu.style.display = 'none'
    }
}

// For legacy broser(IE8 and IE7) support
function addEvent(el, type, fn){
    if(typeof addEventListener !== 'undefined'){
        el.addEventListener(type, fn, false)
    } else {
        el.attachEvent('on'+type, fn);
    }
}

addEvent(document, 'click', hide_menu);

Demo

Answer 2

如果你想要普通的js：

document.addEventListener('click', function(e){
console.log(e.target.id)
    if(e.target.id!=="dropdown_menu")
    console.log("document Clicked");
});

与上述功能相同，但用javascript编写

Answer 3

尝试

function hide_menu(e){

    var menu = document.getElementById('dropdown_menu');

    if(e.target != menu) {
        menu.style.display = 'none';
    }
}

document.body.addEventListener("click", hide_menu);

Answer 4

$('body').click(function(){
    if($(this).attr('id')!='dropdown_menu' && !$(this).hasClass('menu-button'))
           // code to close the menu
});

确保点击不在菜单的div

上

单击外部时关闭JavaScript菜单

4 个答案: