jquery实现手风琴菜单展开折叠效果

最新推荐文章于 2025-06-04 17:08:32 发布

fengxue_snow

最新推荐文章于 2025-06-04 17:08:32 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery 文章标签： JQuery

本文链接：https://blog.youkuaiyun.com/fengxue_snow/article/details/97904821

本文介绍了如何利用jQuery实现手风琴菜单的展开和折叠效果，包括详细代码及最终展示的效果图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、效果图
在这里插入图片描述
2、代码

<style>
			/*common css begin*/
			*{margin:0px;padding:0px;}
			body{font-family: 微软雅黑,Microsoft yahei,Arial,Verdana,Tahoma,sans-serif; font-size: 12px;}
			a { color: #666; text-decoration: none; cursor: pointer; }
			a, input { outline: none; }
			ul li{list-style: none;}
			.fl { float: left; }
			.fr { float: right; }
			.clearfix:after{content:"";display:block;clear: both;}
			/*common css end*/
			.menu{width:300px;height:auto;}
			.menu ul{-webkit-border-radius: 4px;-moz-border-radius: 4px;  border-radius: 4px; }
			.menu ul li .menu_tit{color:#fff;position:relative;width:180px;padding:0 10px;height:30px;line-height:30px;background:#12BCA6;display: block;border-bottom:1px solid #fff;}
			.menu ul li .menu_tit img{vertical-align:mi