jQuery层级菜单

最新推荐文章于 2022-03-02 19:21:12 发布

小歘欻

最新推荐文章于 2022-03-02 19:21:12 发布

阅读量160

点赞数

分类专栏： HTML 文章标签： html5 jquery css javascript

本文链接：https://blog.csdn.net/qq_33840688/article/details/119038851

版权

HTML 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
		<script>
			$(function(){
				var $listA = $('.level1')
				
				$listA.click(function(){
					$(this).next().stop().slideToggle(300).parents().siblings().children('ul').slideUp()
				})
			})
		</script>
		<style>
			ul{
				list-style: none;
			}
			.menu{
				padding: 0px;
				margin: 0 auto;
				width: 200px;
				height: 500px;
				/* border: 1px solid black; */
			}
			.menu li {
				
				border-bottom: 1px solid #00FFFF;
			}
			.menu li a{
				line-height: 25px;
				padding-left: 10px;
				text-decoration: none;
				display: block;
				height: 25px;
				width: 190px;
				color: white;
				background-color: #00619F;
			}
			.menu li ul{
				display: none;
				color: white;
				padding: 0px;
			}
			.menu li ul li{
				padding-left: 20px;
				background-color: #55A8EA;
				border-bottom: 1px solid #00FFFF;
			}
		</style>
	</head>
	<body>
		<ul class="menu">
			<li>
				<a href="#" class="level1">1</a>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
				</ul>
			</li>
			<li>
				<a href="#" class="level1">2</a>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
				</ul>
			</li>
			<li>
				<a href="#" class="level1">3</a>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
				</ul>
			</li>
			<li>
				<a href="#" class="level1">4</a>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
				</ul>
			</li>
			<li>
				<a href="#" class="level1">5</a>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
				</ul>
			</li>
		</ul>
	</body>
</html>

slideToggle收起下落动画持续点击会有持续动画的bug 加上stop可以修正

小歘欻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery层级菜单

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script> $(function(){ var $listA = $('.level1').
复制链接

扫一扫