[英]slide up and slide down
我有一个带有组名的列表。
<ul id="groups" >
<li id="group1" ></li>
<li id="group2" ></li>
<li id="group3"></li>
</ul>
和滑动容器
<div id="containers" >
<ul id="container1" >
Lorem ipsum ..
</ul>
<ul id="container2" >
Lorem ipsum ..
</ul>
<ul id="container3" >
Lorem ipsum ..
</ul>
</div>
我想要做的是,当您单击组时,它隐藏了现有容器并显示了一个新容器。
function hideAll() {
$("#container1 #containter2 #container3").hide();
}
$("#group1").click(function(){
hideAll();
$("#container1").show();
}
$("#group2").click(function(){
hideAll();
$("#container2").show();
}
$("#group3").click(function(){
hideAll();
$("#container3").show();
}
快速而残酷,但如果元素数量较少,则可能会起作用。 如果您有更多东西,则应将其分解为类( $(".container").hide();
),等等。
$("#groups > *").live('click', function() {
var linkIndex=parseInt($(this).attr('id').match(/[0-9]+/)[0], 10);
$("#containers > *").slideUp('slow');
$("#containers > *").filter(function() {
var containerIndex=parseInt($(this).attr('id').match(/[0-9]+/)[0], 10);
return containerIndex==linkIndex;
}).slideDown('slow');
});
您可以在此处演示(略作修改的)版本。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.