![](https://iknow-base.cdn.bcebos.com/lxb/notice.png)
jquery 怎么实现多个ul 显示隐藏 10
<ulid="1"><li></li><li></li><li></li></ul><ulid="2"><li></li><li></li><li></li></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 怎么实现? 展开
<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 怎么实现? 展开
2个回答
2016-01-13 · 知道合伙人互联网行家
关注
![](https://wyw-base.cdn.bcebos.com/pc-content/follow.gif)
展开全部
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>
<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>
2015-06-23 · 百度知道合伙人官方认证企业
关注
![](https://wyw-base.cdn.bcebos.com/pc-content/follow.gif)
展开全部
$(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
});
});
这是我的例子 你参考下
$('.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
});
});
这是我的例子 你参考下
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询