привязать событие клика к функции, которая выполняет ту же функцию

0

В основном я создал скользящее меню с помощью 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 );

Может ли кто-нибудь посоветовать, где я ошибаюсь?

  • 1
    Вы пробовали с $.one('click', function () { ... } ?
  • 0
    @bic вы имеете в виду $('#top').on( "click", menu_slide ); - да, он делает то же самое, но не имеет смысла, почему он сразу закрывается
Показать ещё 1 комментарий
Теги:

2 ответа

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

Похоже, что ваши элементы 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. Этот метод привязывает обработчик к событию, которое будет выполняться только один раз, а затем автоматически отвяжет себя потом. Это удобно, когда вы хотите обрабатывать одно событие и не хотите беспокоиться о его развязывании вручную.

  • 0
    Работает как магия. В самом деле, вы правы, я просто делал скрипку, чтобы повторить мою проблему. Спасибо большое за то, что указали на это и объяснили. Спасибо
0

Есть ли причина связать событие при открытии меню? Можно ли щелкнуть $('#top') когда меню закрыто?

Я думаю, вам было бы лучше просто привязать их обоих с самого начала

$('a.menu-button, #top').click(menu_slide);

А затем избавиться от вызовов $.bind() и $.unbind().

Поскольку вы уже проверяете переменную, чтобы увидеть, открыто или закрыто меню, щелчок либо должен работать правильно, и я предполагаю, что элемент #top скрыт, когда меню закрыто.

Ещё вопросы

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