标记:
<div>
<h3 class = "trigger">Heading 1</h3>
<ul class = "toggle">
<li>Line One</li>
<li>Line Two</li>
<li>Line Three</li>
</ul>
</div>
<div>
<h3 class = "trigger">Heading 2</h3>
<ul class = "toggle">
<li>Line One</li>
<li>Line Two</li>
<li>Line Three</li>
</ul>
</div>
和JQuery:
$(".toggle").slideUp();
$(".trigger").click(function(){
$(".toggle").slideToggle("slow");
});
我希望能够独立地切换这些<ul>
。目前,当点击任一<h3>
标题时,两个div切换。。。
代码位于:http://jsfiddle.net/CPvCZ/4/
解决方案非常简单:
$(".toggle").slideUp();
$(".trigger").click(function(){
$(this).next(".toggle").slideToggle("slow");
});
http://jsfiddle.net/CkTRa/