jQuery 双层折叠特效

最新推荐文章于 2022-05-25 19:12:26 发布

L_melody

最新推荐文章于 2022-05-25 19:12:26 发布

阅读量267

点赞数

分类专栏： js / jQuery

本文链接：https://blog.csdn.net/L_melody/article/details/106633234

版权

该博客介绍了如何使用jQuery创建一个双层折叠特效，包括详细步骤和示例代码，帮助读者掌握动态展示内容的技巧。

摘要由CSDN通过智能技术生成

jQuery 双层折叠特效：

（效果图如下：）

<style type="text/css">
.top{ width:100%; height:50px; background:#645244; margin:0 auto; position:relative;}
.top .open{ position:absolute; top:9px; right:20px; color:#fff; border:2px solid #fff; border-radius:50%;-webkit-border-radius:50%; padding:6px 3px; font-size:12px;}
.menu{ width:100%; height:100%; background:#2e3642; position:absolute;top:0; left:0px; color:#fff; overflow:hidden; margin-left:-100%;}
.menu .line{ width:100%; height:50px; margin:0 auto;}
.menu .line h2{ font-size:20px; line-height:50px; text-indent:15px;}
.menu .close{ float:right; position:absolute; top:9px; right:20px; border:2px solid #fff; border-radius:50%;-webkit-border-radius:50%; padding:6px 3px; font-size:12px;}
.menu .father{ width:100%; float:left;