В основном я создал скользящее меню с помощью jquery.
Смотрите код ниже...
menu_slide = function (e) {
e.preventDefault();
if ( menuOpen == false ) {
$('.pane').animate({
'top' : $('#navigation ul').outerHeight() + 'px'
}, 250 );
menuOpen = true;
$('#top').bind( "click", menu_slide );
} else if ( menuOpen == true ) {
$('#top').unbind("click");
$('.pane').animate({
'top' : 0 + 'px'
}, 250 );
menuOpen = false;
}
}
Уволенный этим...
$("a.menu-button").on( "click", menu_slide );
Теперь, когда мое меню открывается, я хотел бы привязать событие click к div#top
так, чтобы область div действовала как кнопка, чтобы закрыть меню. Но закрыть меню, я хотел бы удалить его.
Я думал, что мой метод использования...
$('#top').bind( "click", menu_slide );
Затем удалите его, используя...
$('#top').unbind("click");
будет иметь желаемый эффект. Но что происходит, когда я открываю меню, которое он сразу закрывает.
И все это из-за этой строки... $('#top').bind( "click", menu_slide );
Может ли кто-нибудь посоветовать, где я ошибаюсь?
Похоже, что ваши элементы a.menu_button
встроены в div#top
:
<div id='top'>
<a class='menu_button'></a>
<a class='menu_button'></a>
<a class='menu_button'></a>
</div>
Если это так, тогда, когда вы нажимаете на menu_button и привязываете событие click к вершине в обработчике, исходный клик menu_button распространяется вверх, а затем запускает событие div#top
щелчка div#top
. См. Fiddle.
Чтобы предотвратить это, вам необходимо прекратить распространение a.menu_button
. Вы можете это сделать:
return false; // stops propagation AND prevents default
или
e.stopPropagation(); // stops propagation
См. Скрипку
Обратите внимание: в моей демонстрации используется $.one()
для привязки к верхнему div. Этот метод привязывает обработчик к событию, которое будет выполняться только один раз, а затем автоматически отвяжет себя потом. Это удобно, когда вы хотите обрабатывать одно событие и не хотите беспокоиться о его развязывании вручную.
Есть ли причина связать событие при открытии меню? Можно ли щелкнуть $('#top')
когда меню закрыто?
Я думаю, вам было бы лучше просто привязать их обоих с самого начала
$('a.menu-button, #top').click(menu_slide);
А затем избавиться от вызовов $.bind()
и $.unbind()
.
Поскольку вы уже проверяете переменную, чтобы увидеть, открыто или закрыто меню, щелчок либо должен работать правильно, и я предполагаю, что элемент #top
скрыт, когда меню закрыто.
$.one('click', function () { ... }
?$('#top').on( "click", menu_slide );
- да, он делает то же самое, но не имеет смысла, почему он сразу закрывается