通过删除 class，当点击不在菜单上时关闭菜单？

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

通过删除 class，当点击不在菜单上时关闭菜单？

Closing a menu when a click is not on the menu by removing a class?

javascript

jquery

menu