Using Jquery slideToggle on large list of individual items
I have a large nested list that I am trying to animate using jquery slideTogg开发者_如何学Cle. I want the individual nested lists (id="Nested" + counter) to animate separately, so that a user could toggle a list to display/hide without affecting the others. The animation would be triggered by the corresponding "trigger_Nested" (+ counter) link.
However, there will end up being around 75 or so nested lists, and I don't want to have to individually list out each pair of anchor and list.
I feel like there is probably a very simple way to do this dynamically using the counter, but I am a bit of a Javascript novice so can't figure it out. The js I have below toggles all lists at the same time, which is not what I want.
Any help is appreciated, Thanks!
<head>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul[id|=Nested]").hide();
$("a[id|=trigger_Nested]").click(function() {
$("ul[id|=Nested]").slideToggle("fast");
return false;
});
});
</script>
</head>
<body>
<ul id='TopLevel-List'>
<li><a href=# id='trigger_Nested-0'>Top Level 1</a>
<ul id='Nested-0' >
<li><a href=#>Item 1</li>
<li><a href=#>Item 2</li>
</ul>
</li>
<li><a href=# id='trigger_Nested-1'>Top Level 2</a>
<ul id='Nested-1'>
<li><a href=#>Item 3</a></li>
<li><a href=#>Item 4</a></li>
<li><a href=#>Item 5</a></li>
</ul>
</li>
</ul>
</body>
You can change your selector inside the .click() handler to use this and find the <ul> relatively, like this:
$(function(){
$("ul[id|=Nested]").hide();
$("a[id|=trigger_Nested]").click(function() {
$(this).siblings("ul").slideToggle("fast");
return false;
});
});
You can view a quick demo here, this goes from the element you clicked (then <a>) and finds it's .siblings() that match the selector (the <ul> in this case), and slideToggle's only that one.
How about two level indented list ??
<ul id="TopLevel-List">
<li><a href=# id="trigger_Nested-0">Top Level 1</a>
<ul id='Nested-0' >
<li><a href=# id='trigger_Nested-1'>Top Level 2</a>
<ul id-'Nested-1'>
<li><a href='#'>Item 1</a></li>
<li><a href='#'>Item 2</a></li>
<li><a href='#'>Item 3</a></li>
</ul>
<ul id-'Nested-1'>
<li><a href='#'>Item 1</a></li>
<li><a href='#'>Item 2</a></li>
<li><a href='#'>Item 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=# id='trigger_Nested-1'>Top Level 2</a>
<ul id='Nested-0' >
<li><a href=# id='trigger_Nested-1'>Top Level 2</a>
<ul id-'Nested-1'>
<li><a href='#'>Item 1</a></li>
<li><a href='#'>Item 2</a></li>
<li><a href='#'>Item 3</a></li>
</ul>
<ul id-'Nested-1'>
<li><a href='#'>Item 1</a></li>
<li><a href='#'>Item 2</a></li>
<li><a href='#'>Item 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
加载中,请稍侯......
精彩评论