Jquery: Показать / скрыть меню с помощью одной кнопки

0

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

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

Как я могу это сделать? (Я использую 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".

  • 1
    Обновлен JSFiddle со второй функцией: jsfiddle.net/G48bK/1
  • 1
    Вот версия, которая работает: http://jsfiddle.net/d4ajx/1/ . Все, что я сделал, это заменил $(document) на $('body')
Показать ещё 3 комментария
Теги:
menu

1 ответ

1
Лучший ответ

Когда вы нажимаете на элемент, срабатывает событие click, и оно всплывает до всех содержащихся элементов. И тело, и документ получат это событие.

Чтобы исправить ваш код, вам нужно прослушивать одно и то же место.

Просто измените $(document) на $('body').

JSFiddle: http://jsfiddle.net/d4ajx/1/

См. Эту диаграмму для получения дополнительной информации.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню