jquery - jQueryのtoggle()メソッド内からクリックイベントを有効にする方法は?

Question

ツリーメニューがあります。<li>このメニューの最後の要素には<a>要素が含まれています。

jQuerytoggle()メソッドを使用しています。

toggle()デフォルトでが含まれていることは知っていe.preventDefault()ます。

私がやりたいのは、クリックイベントを<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/

Answer 1

いくつかの終了タグがありませんでした。

更新された fiddleを参照してください。

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

このon()方法を使用すると、機能をより詳細に制御できます。必要なのはstopPropagation()メソッドです。これにより、クリックイベントが dom ツリーをliスライドトグルする親にバブルアップするのを防ぎます。

liまた、クリックした子のみをフィルタリングするulことで、トグルしたいものをより明確にします。

Answer 2

.on()イベント委譲を使用した Flauwekeul のものの代替バージョン:

$('.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/で参照してください。

イベント委任を使用する利点は、要素ごとに 1 つのイベント ハンドラーではなく、1 つのイベント ハンドラー (親.menu要素内)をアタッチするだけであることliです。