jq三级下拉菜单

abstract：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo练习jq</title> <script src="https://code.jquery.com/jquery-3.3.1.m

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>demo练习jq</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<style type="text/css">
		*{margin: 0;padding: 0;list-style: none;text-decoration: none;}
		.box{width: 300px;height: 300px;background: #ff0;position: absolute;}
		nav{width: 500px;height:40px;line-height:40px;background-color: #666;margin: 50px auto;clear: both;}
		nav li{ float: left;color: #fff;background-color: #666;text-align: center;width: 100px; }
		.two{position: relative;}
		.three{position: absolute;left:100px;top: 50px; }
	</style>
</head>
<body>
	<!-- 三级下拉菜单 -->
	<nav>
		<ul class="one">
			<li>首页</li>
			<li>视频教程
				<ul class="two">
					<li>视频一</li>
					<li>视频二
						<ul class="three">
							<li>三级</li>
							<li>三级</li>
							<li>三级</li>
						</ul>
					</li>
					<li>视频三</li>
				</ul>
			</li>
			<li>社区问答</li>
			<li>技术文章</li>
		</ul>
	</nav>

	<script type="text/javascript">
		$(function(){
			// 三级下拉菜单
			$('.two').hide();
			$('.three').hide();
			//指向显示二级
			$('.one>li').mouseover(function(){
				$(this).find('.two').slideDown(500);
			})

			//指向二级显示三级
			$('.two>li').mouseover(function(){
				$(this).find('.three').slideDown(500);
			})

			//离开隐藏二级
			$('.one>li').mouseleave(function(){
				$(this).find('.two').slideUp(500);
			})

			//离开二级隐藏三级
			$('.two>li').mouseleave(function(){
				$(this).find('.three').slideUp(500);
			})

			
		})
	</script>
</body>
</html>

Correcting teacher：天蓬老师Correction time：2019-04-10 09:45:06
Teacher's summary：下拉菜单中的菜单项, 其实都是事先写好的, 是在页面中的, 只是通过一些脚本让他在合适的时候显示出来罢了, 这个要注意, 其它类似的功能,也是这样实现的

jq三级下拉菜单

Popular Entries