javascript - 当点击不在菜单上时通过删除类来关闭菜单？

Question

我已经看到很多关于当菜单上没有单击时关闭菜单的主题，但我的问题是，如果您不单击#menu，您可以简单地将下面的代码更改为正确吗？ > ul > li > 打开一个removeClass。像 onclick !== css...?

$('#cssmenu > ul > li > a').on('click', function(){
        $("#cssmenu ul").removeClass("open");
    }); 

Answer 1

这样的东西有用吗？:

HTML:

<div class="container">
<div id="cssmenu" class="open">
        Content goes here
</div>
</div>

CSS:

.container {
    width: 100%;
    height: 100%;   
}

#cssmenu {
    width: 50px;
    height: 50px;
    display: inline-block;
    background: #000;
}

.open {
    background: green !important;
}

最后是 JS:

$(document).mouseup(function (e) {
var element = $("#cssmenu");

if (element.has(e.target).length === 0 && !element.is(e.target)) {
    // click outside of the element
    element.removeClass("open");
}
});

jsFiddle