Jquery - Rozbaľovacia ponuka, na ktorú je možné kliknúť - rozbaľovacia ponuka javascript, jQuery

Mám problém s rozbaľovacou ponukou.Mám rozbaľovaciu časť ponuky ponuky, ale keď kliknem na hlavný navigačný odkaz, odhalí všetky položky zoznamu namiesto odhalenia tých, ktoré sú relevantné pre nadradenú ul.

Súbor som nahral na jsfiddle. Mohli by ste mi pomôcť: http://jsfiddle.net/7rwhP/1/

        <div id="secondary-nav"><!--secondary-nav-->
<ul>
<li><a href="#.html">Current Article</a>
<ul>
<li><a href="#.html">Example 1</a></li>
</ul>
</li>

<li><a href="#.html">Past Articles</a>
<ul>
<li><a href="pages.html">Example 1</a></li>
<li><a href="#.html">Example 2</a></li>
<li><a href="#.html">Example 3</a></li>
</ul>
</li>
<li><a href="#.html">Tradition</a>
<ul>
<li><a href="pages.html">Example 1</a></li>
<li><a href="#.html">Example 2</a></li>
<li><a href="#.html">Example 3</a></li>
</ul>
</li>
</ul>
</div><!--/secondary-nav-->

odpovede:

Musíte upraviť JavaScript, aby ste nespúšťali slideToggle všetkých ul ul položiek a musíte pridať poslucháča kliknutí do li - using #secondary-nav ul spustí danú udalosť kliknutia pre každú položku, na ktorú kliknete v tomto zozname.

Skúste to:

$(document).ready(function(){
$("#secondary-nav li").click(function(){
//slide up all the link lists
$(this).children("ul").slideToggle();
})
})

Pamätajte, že selektory v jQuery sú rovnako ako selektory CSS. Keď naviažete udalosť kliknutia na #secondary-nav ul, spustí sa po kliknutí kamkoľvek v tomto zozname, pretože všetky položky zoznamu sú skutočne potomkami ul. Vaša pôvodná obsluha kliknutí #secondary-nav ul ul povie „prepnúť všetky zoznamy, ktoré sú potomkami zoznamu“, ale viac ste chceli dosiahnuť „prepnúť zoznam, ktorý je potomkom položky kliknutého na zoznam“.

DEMO

mali by ste používať $(this).children()

DEMO

$(document).ready(function(){
$("#secondary-nav li").click(function(){
//slide up all the link lists
$(this).children("ul").slideToggle();
})
});

Mali by ste pridať aj tento css

#secondary-nav ul li {
white-space:nowrap;
}

DEMO: Po nanesení nad css