仅当我们在窗口上的任意位置单击时才打开菜单

Question

我正在一种情况下工作，因为我有一个菜单可以切换一个按钮。 当我单击该菜单按钮时，它会正常打开。

此代码问题仍然存在：

当我单击任何地方时，它都会打开和关闭。

现在我需要的是

当我单击窗口菜单上的任何位置时，都应关闭，但仅当它处于打开状态时才应关闭。 仅在处于打开状态时切换。

HTML代码：

<section id="wrapper"> <!-- Sidebar -->
    <aside id="sidebar-wrapper">
    <div class="togglebtn"><a href="#menu-toggle" id="menu-toggle"></a></div>
          <ul class="sidebar-nav">
            <li class="sidebar-brand"> <a href="#" class="ripple">
              <div class="icon"><i class="demo-icon icon-meeter"></i></div>
              <div class="nav-label"> <span>Dashboard</span></div>
              </a> 
             </li>
          </ul>
    </div>
</aside> 
</section>

JavaScript代码：

<script>
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        e.stopPropagation();
        $("#wrapper").toggleClass("toggled");
    });

    $("body").click(function (e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
</script>

任何帮助将非常感激。

Answer 1

只需更改$("body").click函数即可：

$("body").click(function () {
    $("#wrapper").removeClass("toggled");
});

现在发生的事情是您每次单击身体的任何部分时都在“切换”该类。 切换根据当前状态打开或关闭一个类。 您只需要确保在单击主体时将其删除即可。

实际上，您可以使用toggleClass来完成此操作，但是必须通过向其传递state参数来告知您要删除该类。

$("#wrapper").toggleClass("toggled", false);

有关toggleClass的信息，请参见jQuery文档： http : //api.jquery.com/toggleclass/