使用jQuery实现折叠菜单效果

沐小侠

已于 2023-03-28 14:18:02 修改

阅读量1.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： HTML+CSS+JS 文章标签： jquery javascript html

于 2023-03-28 14:14:30 首次发布

本文链接：https://blog.csdn.net/weixin_41092938/article/details/129814910

该文章展示了一个使用HTML、CSS和jQuery实现的折叠菜单效果。菜单项包含iconfont图标，点击后子菜单会以滑动动画展开或收起。代码中利用jQuery的slideToggle方法处理展开/收起动画，并切换箭头图标的方向。

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

折叠菜单效果：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link href="css/iconfont.css" rel="stylesheet"/>
		<style>
			ul,li,a{
     
     
				margin: 0px;
				padding: 0px;
			}

			a{
     
     
				text-decoration: none;
				color: #000;
				line-height: 28px;
			}
			#menu>li{
     
     
				width: 130px;
				list-style-type: none;
				text-align: center;
				background-color: #000;
			}
			#menu>li>a{
     
     
				color: #fff;
			}
			.submenu{
     
     
				background-color: #fff;
				display: none;
			}
			.submenu>li{
     
     
				list-style-type: none;
			}
		</style>
	</head>