jQuery实现的树形动画

最新推荐文章于 2020-06-13 10:59:59 发布

cc果冻LXY

最新推荐文章于 2020-06-13 10:59:59 发布

阅读量688

点赞数 1

CC 4.0 BY-SA版权

分类专栏： jquery

本文链接：https://blog.youkuaiyun.com/weixin_44538675/article/details/87437768

jquery 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和jQuery实现响应式多级下拉菜单的方法。通过为有子菜单的列表项添加图标，并利用jQuery的事件处理和动画效果，实现了菜单项的展开和收起功能。

要引入jquery库才可以实现

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		ul li {
			list-style: none;
		}
		li ul{
			display: none;
		}
		.plus{
			list-style-image: url(img/plus.gif);
		}
		.minus{
			list-style-image: url(img/minus.gif);
		}
	</style>

	<body>
		<ul>
			<li>主题市场
				<ul>
					<li>运动派
						<ul>
							<li>三级菜单a</li>
							<li>三级菜单b</li>
							<li>三级菜单c</li>
							<li>三级菜单d</li>
						</ul>
					</li>
					<li>有车族
						<ul>
							<li>三级
								<ul>
									<li>四级</li>
									<li>四级</li>
									<li>四级</li>
								</ul>
							</li>
							<li>三级</li>
							<li>三级</li>
							<li>三级</li>
						</ul>
					</li>
					<li>生活家</li>
				</ul>
			</li>
			<li>特色购物
				<ul>
					<li>淘宝二手</li>
					<li>拍卖会</li>
					<li>爱逛街</li>
					<li>全球购</li>
					<li>淘女郎</li>
				</ul>
			</li>
			<li>优惠促销
				<ul>
					<li>天天特价</li>
					<li>免费试用</li>
					<li>清仓</li>
					<li>1元起拍</li>
				</ul>
			</li>
			<li>工具</li>
		</ul>
		<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
		<script type="text/javascript">
			//给有子菜单的li添加一个图标
			$("li").has("ul").addClass("plus")
			.click(function(e){
				e.stopPropagation();
				if($(e.target).children().length){
					$(this).children().slideToggle();
					$(this).toggleClass("minus");
				}
			})
			
		</script>

	</body>

</html>