jQueryのは、私は、ネストされたULの</p> <p>でシンプルなULメニュー<a href="http://www.ttmt.org.uk/forum/nav/index1.html" rel="nofollow">here</a>を持ってULはメニュー

Question

ドロップダウン入れ子になった私は、リンクが をクリックし、2回目のクリックで、再び上にスライドされたときに、ネストされたメニューが下にスライドします。これは機能しています。

別のリンクをクリックしたときに閉じるために開いているネストされたメニューが必要です。 これは機能しません。

開いているネストされたメニューを閉じるには、 が必要なネストされたメニューを開く前にこれを使用しようとしましたが、ネストされたメニューのリンクがクリックされるとネストされたメニューも閉じます。それは親がクリックされますと、別のリンクがクリックされたときに開いているすべてのネストされたメニューを閉じると

http://www.ttmt.org.uk/forum/nav/index2.html

$(document).ready(function() { 
    $('#nav ul.children').slideUp(); 
    $('#nav li').click(function (e) { 
     $('ul.children').slideUp(); 
     $('ul', this).slideToggle(); 
     e.stopPropagation(); 
    }); 
}); 

は、どのように私は、ネストされたメニューをslideToggleすることができます。

<ul id="nav"> 
    <li><a href="#">One</a> 
    <ul class="children"> 
     <li><a href="http://www.google.com">One/One</a></li> 
     <li><a href="http://www.bbc.com">One/Two</a></li> 
     <li><a href="#">One/Three</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Two</a></li> 
    <li><a href="#">Three</a> 
    <ul class="children"> 
     <li><a href="#">Three/One</a></li> 
     <li><a href="#">Three/Two</a></li> 
    </ul> 
    </li> 
</ul> 

$(document).ready(function(){ 
    $('#nav ul.children').slideUp(); 
    $('#nav li').click(function(e){ 
    //$('ul.children').slideUp(); 
    $('ul', this).slideToggle(); 
    e.stopPropagation(); 
    }); 
}); 

EDIT

私は、私のコードで別の主要な問題を抱えている私は開始時に、ネストされたULを閉じるため

$('#nav ul.children').slideUp(); 

リンクをクリックしてページをリロードすると、すべてのメニューが閉じます。 ページがリロードされたときに、ネストされたメニューを開いたままにするにはどうすればよいですか。

Answer 1

サブ項目がクリックされたときにこれを使用する、アクションを防ぐために：

$('#nav > li').click(function(e){ ... 

「>」文字は任意の子孫

とは対照的に 子である李を選択

...サブビーム内のリンクをクリックすると$('ul.children').slideUp();は発生しません。

Answer 2

すべての最初の2つ目の問題（pageloadを）解決するために、ページのロード時にCSSスタイルを使用して隠されたすべてのネストされたULタグを非表示

li ul 
{ 
    display:none; 
} 

このスクリプトを置く

$("#nav li").click(function(){ 
    $(this).parent().find("li ul:visible").slideUp(); //this helps to slideUp visible uls 
    //then your code 
});