Я пытаюсь сделать кнопку, которая вызывает меню. После вызова меню нажатие на кнопку должно закрыть меню.

Есть также некоторые классы, которые должны быть добавлены в меню / кнопку, чтобы помочь со стилем.

Как я могу это сделать? (Я использую jQuery 1.8.3.)

Это мой код:

$(function() {
    "use strict";
    $(document).on('click', '.anchor', function() {

        $('.ui-tapmenu').removeClass("animated bounceInDown");
        $('.ui-tapmenu').hide();
        $('.overlay').hide();
        var menuId = $(this).data('menu');
        var menuName = '.' + menuId;
        $(".loading").delay(1000).show(0);
        $(menuName).addClass("animated bounceInDown");
        $(menuName).show();
        $(this).addClass('close jq-close');
    });

    $('body').on('click', '.close', function() {
        $(this).addClass('anchor');
        $(this).removeClass('close');
        $('.ui-tapmenu').removeClass("animated bounceInDown");
        $('.ui-tapmenu').hide();
        $('.overlay').hide();
        $('.anchor.jq-close').removeClass('close');
    });

});

JS Fiddle:http://jsfiddle.net/big_smile/d4ajx/

Проблема: это работает, но когда меню закрыто, открытый код обновляется, поэтому меню остается постоянно открытым. Я не уверен, почему это происходит, так как при запуске «открытого кода» он добавляет класс к триггеру. «Код закрытия» работает только в этом классе, поэтому «открытый код» не должен запускаться снова.

Вот другая версия:

$(function() {
    "use strict";
    $(document).on('click', '.anchor', function() {

        $('.ui-tapmenu').toggleClass("animated bounceInDown");
        $('.ui-tapmenu').toggle();
        $('.overlay').toggle();
        var menuId = $(this).data('menu');
        var menuName = '.' + menuId;
        $(".loading").delay(1000).toggle(0);
        $(menuName).toggleClass("animated bounceInDown");
        $(menuName).toggle();
        $(this).toggleClass('close jq-close');
    });

});

JsFiddle:http://jsfiddle.net/big_smile/G48bK/

Проблема: здесь используется тумблер. Меню изначально скрыто с помощью CSS. Toggle устанавливает в меню «display: none», а затем никогда не устанавливает его в «display: block».