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 怎么实现？

　　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>

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/pqff2vmpspv8sqpv7v7.html