Я пытаюсь сделать кнопку, которая вызывает меню. После вызова меню, нажатие на кнопку должно закрыть меню.
Также есть несколько классов, которые необходимо добавить в меню/кнопку, чтобы помочь в стилизации.
Как я могу это сделать? (Я использую 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".
Когда вы нажимаете на элемент, срабатывает событие click
, и оно всплывает до всех содержащихся элементов. И тело, и документ получат это событие.
Чтобы исправить ваш код, вам нужно прослушивать одно и то же место.
Просто измените $(document)
на $('body')
.
JSFiddle: http://jsfiddle.net/d4ajx/1/
См. Эту диаграмму для получения дополнительной информации.
$(document)
на$('body')