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");
});

现在发生的事情是你正在切换＆＃34;切换＆＃34;每次点击身体的任何部分时都会上课。切换会根据当前状态关闭或上的课程。您需要确保在单击正文时将其删除。

您实际上可以使用toggleClass来完成此任务，但您必须告诉它您要通过传递state参数来删除该类。

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

请参阅toggleClass的jQuery文档：http://api.jquery.com/toggleclass/

当我们点击窗口上的任何地方时，仅在打开时切换菜单

1 个答案: