Question

jquery 怎么实现多个ul 显示隐藏

<ul id ="1">
<li></li>

<li></li>
<li></li>
</ul>

<ul id ="2">
<li></li>

<li></li>
<li></li>
</ul>
<ul id ="3">
<li></li>

<li></li>
<li></li>
</ul>

默认都三个<ul>都是隐藏状态 当点击1的时候显示1的数据 当点击2的时候隐藏1 显示2 怎么实现？

Answer 1

　　HTML代码
　　<div class="List">
　　<span>点击</span>
　　<ul>
　　<li>1111111111</li>
　　<li>2222222222</li>
　　<li>333333333</li>
　　<li>4444444444</li>
　　<li>5555555555</li>
　　<li>6666666666</li>
　　</ul>
　　</div>
　　四种方法实现
　　<script type="text/javascript">
　　$(function(){
　　1.$(".List span").click(function(){
　　var ul = $(this).next("ul");
　　if(ul.css("display")=="none"){
　　ul.css("display","block");
　　}
　　else{
　　ul.css("display","none");
　　}
　　});

　　2. $(".List span").toggle(function(){
　　$(this).next("ul").hide(1000);
　　},function(){
　　$(this).next("ul").show(1000);
　　});

　　3.$(".List span").toggle(function(){
　　$(this).next("ul").css("display","none");
　　},function(){
　　$(this).next("ul").css("display","block");
　　});

　　4.$(".List span").toggle(Handler,Handler);
　　function Handler(){
　　$(this).next("ul").toggle(1000);
　　}
　　});
　　</script>

Answer 2

$(function() {// 初始化
$('.second').bind('click', function() {//给二级菜单绑定点击事件，控制三级目录的显示隐藏
var childrens = $(this).nextUntil('.second');//取出当前点击的目录的子目录
if(childrens.css('display') == 'none') {//如果子目录的css样式是隐藏，子目录则快速展开；否则，子目录快速收缩
childrens.slideDown('fast');
} else {
childrens.slideUp('fast');
}
});
$('.second, .third').bind('click', function() {//给二、三级菜单绑定点击事件，
$('.sideMenu .click').removeClass('click');//找到已点击的目录删除其class
$(this).addClass('click');//给当前点击的目录增加class
});
});
这是我的例子 你参考下