Как включить событие click из ‹a› внутри метода jQuery toggle()?

У меня есть древовидное меню. Последний элемент <li> в этом меню содержит элемент <a>.

Я использую метод jQuery toggle().

Я знаю, что toggle() по умолчанию содержит e.preventDefault().

Что я хочу сделать, так это вернуть событие click элементу <a>.

Не могли бы вы помочь?

HTML:

<ul class="menu">
    <li>
        Item1
        <ul style="display: none">
            <li>
                subItem1
                <ul style="display: none">
                    <li>
                        <a href="http://www.google.com">Google</a>
                    </li>
                    <li>
                        <a href="http://www.yahoo.com">Yahoo</a>
                    </li>
                    <li>
                        <a href="http://www.facebook.com">Facebook</a>
                    </li>     
                </ul>
            </li>
        </ul>
    </li>
</ul>

Javascript:

$(".menu li").toggle(
    function() {
        $(this).children().slideDown();
    },

    function() {
        $(this).children().slideUp(); 
    }
);

Пожалуйста, проверьте эту скрипту: http://jsfiddle.net/fzy48/


toggle jquery jquery-click-event
person Rodrigo Abib    schedule 13.03.2013    source источник
comment
Вы пробовали, что предлагает этот вопрос? ... stackoverflow.com/ вопросы/1551389/   -  person CL22    schedule 13.03.2013

Ответы (2)


arrow_upward
1
arrow_downward

Вы пропустили несколько закрывающих тегов.

См. обновленную скрипту.

$(".menu li").on('click', function(e) {
    e.stopPropagation();
    $(this).children('ul').slideToggle();
});

Используя метод on(), вы лучше контролируете свою функциональность. Что вам нужно, так это метод stopPropagation(): он предотвращает всплытие события click вверх по дереву dom до родитель li, который будет переключать его.

Кроме того, фильтруя дочерние элементы li по нажатию только ul, вы более четко указываете, что вы хотите переключить.

person Flauwekeul    schedule 13.03.2013
comment
Хорошо объясненный ответ, +1 :-) - person Nelson; 13.03.2013

arrow_upward
0
arrow_downward

Альтернативная версия версии Флаувекеля, использующая .on() делегирование событий:

$('.menu').on('click', 'li', function(event){
    if (event.target != this) {
     return;//dont want bubbled up events
    }
    $(event.target).children('ul').slideToggle();
});

См. его в http://jsfiddle.net/fzy48/5/.

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

person Nelson    schedule 13.03.2013