Mobile Menu toggleClass and removeClass

Question

So I have your typical button to display the menu on mobile devices. The first code works great. Click the button and the menu opens and closes. The client wants the menu to close if you click on something other than the menu, including the button. Once I add the second code, the menu opens when you click on the button and closes when you click on the "content." But the menu doesn't close when you click on the button again. I've tried changing "toggleClass" to just "addClass" but it's the same issue. The button is not part of the menu so I'm kind of at a loss here. Can anyone help? Need I explain more?

$(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

Working Demo : http://jsfiddle.net/TSC5N/1/

Update the JS like this :

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

The problem was when you click on button, Menu will toggle and nav-open class will be added. But button is considered out side of the menu. So Now when you click again on button mouseup function will remove the class nav-open. But toggle event will fire and again same class will be added. So at the end menu will have nav-open class again.

Whats the fix : !button.is(e.target) condition will check if the clicked item is button or not.

Answer 2

Use this code. 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");
}
});