运用jQuery写下拉菜单效果

最新推荐文章于 2024-08-17 23:24:44 发布

fengGer的bugs

最新推荐文章于 2024-08-17 23:24:44 发布

阅读量545

点赞数 1

分类专栏：下拉菜单 js简单案例文章标签： jQuery

本文链接：https://blog.csdn.net/qq_41224512/article/details/87445908

版权

js简单案例同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

下拉菜单

2 篇文章 0 订阅

订阅专栏

<head>
	<meta charset="utf-8" />
	<title>下拉菜单</title>
</head>
<style type="text/css">
	ul li {
		list-style: none;
		width: 150px;
		cursor: pointer;
	}
	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>四级
									<ul>
										<li>五级菜单a</li>
										<li>五级菜单b</li>
										<li>五级菜单c</li>
										<li>五级菜单d</li>
									</ul>
								</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 src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			//给有子菜单的li添加一个图标
			$("li").has("ul").addClass("plus")
			.click(function(e){
				e.stopPropagation();
				if($(e.target).children().length){
					$(this).children().slideToggle(800);
					$(this).toggleClass("minus");
				}
			})
		});
		
	</script>

</body>