1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > html 列表实现展开和收起 实现列表展开收起效果

html 列表实现展开和收起 实现列表展开收起效果

时间:2019-10-19 13:37:45

相关推荐

html 列表实现展开和收起 实现列表展开收起效果

$(".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:

今日头条按钮需要展开收起的内容今日头条按钮需要展开收起的内容

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");

});

这个方法还是比较简单易懂的。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。