移動菜單toggleClass和removeClass

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