jquery三级下拉栏

最新推荐文章于 2022-04-23 11:33:04 发布

清静清源

最新推荐文章于 2022-04-23 11:33:04 发布

阅读量122

点赞数

分类专栏： javascript 文章标签： jquery 下拉栏

本文链接：https://blog.csdn.net/qq_35068659/article/details/114482517

版权

javascript 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>3级下拉栏</title>
		<style>
			#aside-nav {
				list-style: none;
			}
			#aside-nav li {
				font-size: 10px;
			}
			#aside-nav a {
				text-decoration: none;
			}
			#aside-nav a:hover {
				color: goldenrod;
			}
		</style>
	</head>
	<body>
		<ul id="aside-nav">
			<li>
				<a href="#">Home</a>
				<ul>
					<li>
						<a href="#">Picture</a>
						<ul>
							<li><a href="#">家乡</a></li>
							<li><a href="#">山川</a></li>
							<li><a href="#">河流</a></li>
						</ul>
					</li>
					<li>2</li>
					<li>3</li>
				</ul>
			</li>
			<li>
				<a href="#">About</a>
				<ul>
					<li>版权</li>
					<li>
						<a href="#">联系</a>
						<ul>
							<li><a href="#">QQ</a></li>
							<li><a href="#">Email</a></li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
		<script src="js/jquery.js"></script>
		<script>
			$(function(){
				$("#aside-nav ul").hide();
				
				$("#aside-nav li a:first-child").click(function(){
					$(this).next().toggle();
				});
				
				$("#aside-nav li ul li a:first-child").click(function(){
					$(this).sibling("ul").toggle();
				});
			});
		</script>
	</body>
</html>

南无阿弥陀佛，善哉善哉