jquery - how to set slideToggle to work for more than one time -
i have nested ul tags , hide them can apply jquery slidetoggle effect them( want slide each element independently). when press each 'li' tag in first 'ul' second 'ul's become visible together.
this how html code is:
<div class="content"> <ul class="mainlist"> <li class="mainitem">list item</li> <ul class="sublist"> <li class="subitem">list item</li> <li class="subitem">list item</li> <li class="subitem">list item</li> <li class="subitem">list item</li> <li class="subitem">list item</li> </ul> <li class="mainitem">>list item</li> <ul class="sublist"> <li class="subitem">list item</li> <li class="subitem">list item</li> <li class="subitem">list item</li> <li class="subitem">list item</li> <li class="subitem">list item</li> </ul> <li class="mainitem">>list item</li> <ul class="sublist"> <li class="subitem">list item</li> <li class="subitem">list item</li> <li class="subitem">list item</li> <li class="subitem">list item</li> <li class="subitem">list item</li> </ul> <li class="mainitem">>list item</li> <ul class="sublist"> <li class="subitem">list item</li> <li class="subitem">list item</li> <li class="subitem">list item</li> <li class="subitem">list item</li> <li class="subitem">list item</li> </ul> <li class="mainitem">>list item</li> <ul class="sublist"> <li class="subitem">list item</li> <li class="subitem">list item</li> <li class="subitem">list item</li> <li class="subitem">list item</li> <li class="subitem">list item</li> </ul> </ul> </div> and js file looks this:
$('.content').click(function(){ $('.mainlist').slidetoggle(); }); $('.mainitem').click(function(){ $('.sublist').slidetoggle(); });
i'm not sure trying here fiddle might you: jsfiddle
some notes:
in jquery: have error functin -> function.
if want affect 1 element should use unique ids or use
$(this)... this indicate using element triggered event (in example "click")
, u can use next(), prev(), children(), parent(), find(), etc - select relative element .
Comments
Post a Comment