jQuery实现下拉框_jquery tooltip 下拉-CSDN博客

本文链接：https://blog.csdn.net/Timber_wood/article/details/105821983

调用jQuery,用slideToggle();实现下拉框 jQuery插件下载地址

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript" src="/static/js/jquery-3.5.0.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('a').click(function(){
				$(this).next().slideToggle(800);
			})
		})
	</script>	
	<table>	
		<ul>
			<li>
				<a href="#">顶级菜单一</a>
				<ul>
					<li>子菜单1</li>
					<li>子菜单2</li>
					<li>子菜单3</li>
				</ul>
			</li>
		</ul>	
		<ul>
			<li>
				<a href="#">顶级菜单二</a>
				<ul>
					<li>子菜单1</li>
					<li>子菜单2</li>
					<li>子菜单3</li>
				</ul>
			</li>
		</ul>
		<ul>
			<li>
				<a href="#">顶级菜单三</a>
				<ul>
					<li>子菜单1</li>
					<li>子菜单2</li>
					<li>子菜单3</li>
				</ul>
			</li>
		</ul>	
	</table>
<style>
	*{
		margin: 0px;
		padding:0px;
	}
	ul,li{
		list-style: none;
	}
	/*顶级菜单*/
	a{
		display: block;
		width: 120px;
		height: 30px;
		line-height: 30px;
		text-decoration: none;
		background-color: black;
		color: white;
	}
	/*子菜单*/
	ul ul>li{
		width: 120px;
		height: 30px;
		line-height: 30px;
		background-color: darkslategrey;
		color: yellow;
	}
	/*默认子菜单隐藏*/
	ul ul{
		display: none;
	}	
</style>
</body>
</html>