javascript - document.click 以删除页面上的类行为不正常

Question

我正在尝试创建一种全局样式的下拉菜单，当他们的菜单图标被点击时，它会在打开和关闭之间切换，但也会在页面上的其他任何地方被点击时关闭。我打开或关闭此下拉菜单的方式是向下拉菜单的父级添加或删除名为“open”的类。

这个想法(更清楚)是下拉列表的普通类有 display: none;设置在它上面，但如果它是类“open”的东西的后代，那么它有 display: block;

所以，事不宜迟，这是我目前所拥有的: “openable”是一类“父”元素，单击它可以添加“open”类。

<script>
$(document).ready(function(){
    $('.openable').click(function(){
        if($(this).hasClass("open")){
            $(this).removeClass("open");
        }
        else{
            $(this).addClass("open");
        }
    });
});

它本身实际上工作得很好——它作为下拉菜单的一个足够好的开关。当然，点击其他任何地方都不会关闭下拉菜单。

我显然无法正常运行的关闭脚本是:

<script>
$(document).ready(function(){
    $(document).click(function(event) {
        var clicked = $(event.target);
            if(clicked.hasClass(".open")){
        }
        else{
            if($(".open").length > 0){
                $(".open").each(function(){
                    $(this).removeClass("open");
                });
            }
        }
    });
});
</script>

在页面上使用该脚本后，下拉菜单将完全停止工作，并且控制台不会抛出任何错误供我处理。

有什么更好的方法吗？

谢谢

编辑:html 标记类似于

<li class="navItem dropdown openable">
<span><img src="img/settings.png"></span>
  <ul class="subNav hubDrop">
    <li>Nav item 1</li>
    <li>Nav item 2</li>
    <li>Nav item 3</li>
    <li>Nav item 4</li>
</ul>
        </li>

每一个。 li 标签在另一个 ul 中(记住，这本质上是用于下拉菜单的)

Answer 1

jsFiddle Demo - 由于您没有提供任何 HTML，我模拟了一些元素...

更新:您没有指定是否可以一次“打开”多个元素；在您当前的解决方案中，它们可以，所以我保留了这种行为。但是，要将其限制为打开一个，您可以在 .openable 中添加 $('.open').not(this).removeClass('open');点击处理程序。

---

第一部分:为什么不直接使用 .toggleClass

$(document).ready( function() {
    $('.openable').click( function() {
        $(this).toggleClass("open");
    });
});

第二部分:不需要第二个就绪的处理程序；首先，添加:

$(document).click( function(e) {
    var clicked = $(e.target).closest('.openable');
    if ( clicked.length == 0 ) {
        $(".open").removeClass('open');
    }
});