Question

所以我有一个典型的按钮来显示移动设备上的菜单。第一个代码效果很好。单击按钮，菜单将打开和关闭。如果您单击菜单以外的其他内容（包括按钮），客户端希望关闭菜单。添加第二个代码后，单击按钮时菜单会打开，单击“内容”时会关闭。但是再次单击按钮时菜单不会关闭。我已经尝试将“toggleClass”更改为“addClass”，但这是同样的问题。按钮不是菜单的一部分所以我在这里有点不知所措。有人可以帮忙吗？需要我解释一下吗？

$(document).ready(function(){
    $("#mobile-menu-button").click(function () {
        $("#mobile-nav").toggleClass("nav-open");
        $(".mobile").toggleClass("to-left");
    });
});

/* When Mobile Menu open, close by clicking other than menu */

$(document).mouseup(function (e) {
    var container = $(".nav-open");
    if (!container.is(e.target)
    && container.has(e.target).length === 0) {
        container.removeClass("nav-open");
        $(".mobile").removeClass("to-left");
    }
});

Answer 1

工作演示：http://jsfiddle.net/TSC5N/1/

像这样更新JS：

$(document).ready(function(){
    $("#mobile-menu-button").click(function () {
        $("#mobile-nav").toggleClass("nav-open");
        $(".mobile").toggleClass("to-left");
    });
});

/* When Mobile Menu open, close by clicking other than menu */

$(document).mouseup(function (e) {
    var container = $(".nav-open");
    var button = $('#mobile-menu-button');
    if (!container.is(e.target)
    && container.has(e.target).length === 0 && !button.is(e.target)) {
        container.removeClass("nav-open");
        $(".mobile").removeClass("to-left");
    }
});

问题是当您点击按钮时，菜单将切换并添加nav-open课程。但是按钮被认为是菜单的一侧。因此，当您再次单击按钮mouseup时，函数将删除类nav-open。但是toggle事件将会触发，并且将再次添加相同的类。因此，在结束菜单中将再次nav-open课程。

什么是修复： !button.is(e.target)条件将检查点击的项目是否为按钮。

Answer 2

使用此代码。 http://jsfiddle.net/5gcSt/

$("#mobile-menu-button").click(function () {
   if($("#mobile-nav").hasClass('nav-closed')){
      $("#mobile-nav").addClass("nav-open");
      $("#mobile-nav").removeClass("nav-closed");
      $(".mobile").addClass("to-left");
   }
   else{
      $("#mobile-nav").addClass("nav-closed");
      $("#mobile-nav").removeClass("nav-open");
      $(".mobile").removeClass("to-left");
   }
});
/* When Mobile Menu open, close by clicking other than menu */

$(document).mouseup(function (e) {
var container = $(".nav-open");
var button = $('#mobile-menu-button');
if (!container.is(e.target)
&& container.has(e.target).length === 0) {
    container.removeClass("nav-open");
    $(".mobile").removeClass("to-left");
}
});

移动菜单toggleClass和removeClass

2 个答案: