をクリックしてネストされたulのネストされたulの

Question

私はネストされたulsを使ってマークダウンファイルを解析し、アコーディオンスタイルのドキュメントシステムを作成します。そこでは、ulが続く各要素をクリックして内容を表示することができます。

構造はおおよそ次のとおりです。

h4 (click to expand) 
    ul 
    li (click to expand) 
     ul 
     li (click to expand) 
      ul 

は、ここに私のコードです：

$('li').each(function(){ 
    if($(this).children().is('ul')) { 
    $(this).addClass('link').bind('click', function(e){ 
    e.stopPropogation(); 
    $(this).children('ul').slideToggle(); 
    }); } 
}); 

stopPropigationがなければ（）そこに私は2番目のliトリガーに（？レベル2）をクリックしたとき、それはだ広げるん明らかに、それを虚偽の行動にする親を崩壊させる。 stopPropを使用すると、関数がすべて一緒に終了します。

思考？

Answer 1

これはどう要素を選択するインサイドアウトアプローチを採用しています。全体的なラッパーの中で、ulを選択し、親LIを見つけます。

$(".listWrapper").find('ul').parent('li').on('click', function(evt){ 
    $(this).children('ul').slideToggle(); 
    evt.stopPropagation(); 
}).children('span').addClass('link'); 

また、各H4見出しの下のリストを折りたたみ可能にしたい場合は、別に行う必要があります。

$(".listWrapper").find('ul').prev('h4').addClass('link').on('click', function(evt){ 
    $(this).next('ul').slideToggle(); 
}); 

注：私はスパンがそのテキストが選択され、したがって、下線が引かれてからのすべてのサブリストのテキストを防止することができるように、各「サブリストで項目」周りに必要であることが判明しました。試してみるとスパンがなくなり、あなたは私が何を意味するか見ることができます。同じ目的を達成するためのよりよい方法があるかもしれません。

すべてがこので実証されている。fiddle

Answer 2

方法についてthis：

$('li').has('ul').addClass('link').click(function(){ 
    $(this).children('ul').slideToggle(); 
}); 

だけでもULのようにして李さんは、正常に動作する必要がありますターゲットとしているその方法：

$("li").click(function(event) { 
    if (event.srcElement = event.currentTarget) { 
     $(this).children("ul").slideToggle(); 
     event.stopPropagation(); 
    } 
}); 

Answer 3

私はこのようなものを使用すると思います。助け:)

---

を編集

希望 - これはまた、開いているすべての子供たちを閉じます：私はこれがすることによって簡単にだと思うhttp://jsfiddle.net/aCaEG/

Answer 4

：

$('li').has('ul').addClass('link').click(function(){ 

    var $li = $(this), 
     $ul = $li.children('ul'); 

    if($li.is('.open')){ 
     $ul.slideUp(); 
     $li.removeClass('open'); 
     $li.find('li.open').click(); // Also close the open children 
    }else{ 
     $ul.slideDown(); 
     $li.addClass('open'); 
    } 

});