这篇文章主要为大家展示了“WEB中如何实现列表展开收起效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“web中如何实现列表展开收起效果”这篇文章吧。$(&qu
这篇文章主要为大家展示了“WEB中如何实现列表展开收起效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“web中如何实现列表展开收起效果”这篇文章吧。
$(".btn").click(function () {
$(this).parents("当前元素最外层div的class").toggleClass("showDiv").siblings().removeClass("showDiv");
});
CSS:
.最外层div class .需要收起展开的div的class{
display: none;
}
.showDiv .需要收起展开的div的class{
display: block;
}
实现思路:通过动态的添加showDiv 这个class实现列表的展开收起
demo:
html:
<div class="aa">
<div class="bb">今日头条</div>
<div class="btn">按钮</div>
<div class="aa-cont none">需要展开收起的内容</div>
</div>
<div class="aa">
<div class="bb">今日头条</div>
<div class="btn">按钮</div>
<div class="aa-cont none">需要展开收起的内容</div>
</div>
css:
.none{
display:none;
}
.aa .aa-cont {
display: none;
}
.showDiv .aa-cont {
display: block;
}
js:
$(".btn").click(function () {
$(this).parents(".aa").toggleClass("showDiv").siblings().removeClass("showDiv");
});
这个方法还是比较简单易懂的。
以上是“web中如何实现列表展开收起效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网node.js频道!
--结束END--
本文标题: web中如何实现列表展开收起效果
本文链接: https://www.lsjlt.com/news/83908.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0