How can I collapse a nested list using jQuery?
I have a nested list:
<ul>
<li><a href='#'>stuff</a></li>
<li><a href='#'>stuff2</a开发者_如何学Python></li>
<ul>
<li><a href='#'>stuff3</a></li>
</ul>
<li><a href='#'>stuff4</a></li>
</ul>
...and want to collapse the nested ul when the li is clicked. Before I was using
$('UL LI').click(function(){
$(this).next().slideToggle();
});
...but this obviously causes a problem when a li doesn't have a ul nested after it. Is there a better way to do this, or is there a way for me to determine if the object returned by $(this).next() is a UL?
if($(this).next().is("ul")) {
}
Should do the trick. See: http://api.jquery.com/is/
$('LI').toggle(function() {
$(this).children('ul').slideUp();
},
function() {
$(this).children('ul').slideDown();
});
This is assuming that you mean the UL listed under the LI that is clicked. If you want a particular UL to collapse whenever any LI is clicked, you might have to write something with a few more checks.
can it be just $(this).next("ul").slideUp()
a bit late, but...
$('UL LI').click(function() {
$('> ul', this).toggle();
});
精彩评论