利用jq写的三级导航栏

最新推荐文章于 2019-10-12 20:59:56 发布

jsjiang_

最新推荐文章于 2019-10-12 20:59:56 发布

阅读量486

点赞数 3

本文链接：https://blog.csdn.net/qq_40924516/article/details/89085036

版权

点击二级栏目显示三级,自己修改一下引用jq.js的地址

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>三级导航栏</title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			ul li{
				list-style: none;
			}
			header{
				width: 100%;
				height: 70px;
				line-height: 70px;
				background: #99CC00;
				text-align: center;
			}
			.hover{
				background-color: red;
			}
			.hover-color{
				color: red;
			}
			ul.one-ul{
				display: inline-block;
			}
			li.one-li{
				float: left;
				width: 200px;
				display: inline;
				cursor: pointer;
				position: relative;
			}
			ul.two-ul{
				position: absolute;
				display: none;
				width: 380px;
			}
			ul.three-ul{
				display: none;
			}
		</style>
	</head>
	<body>
		<header>
			<ul class="one-ul">
				<li class="one-li">
					<a>第一级01</a>
					<ul class="two-ul">
						<li class="two-li"><a>第一级01-第二级01</a>
							<ul class="three-ul">
								<li><a>第一级01-第二级02-第三级01</a></li>
								<li><a>第一级01-第二级02-第三级02</a></li>
							</ul>
						</li>
						<li class="two-li"><a>第一级01-第二级02</a></li>
						<li class="two-li"><a>第一级01-第二级03</a>
							<ul class="three-ul">
								<li><a>第一级01-第二级03-第三级01</a></li>
								<li><a>第一级01-第二级03-第三级02</a></li>
								<li><a>第一级01-第二级03-第三级03</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li class="one-li">
					<a>第一级02</a>
					<ul class="two-ul">
						<li class="two-li"><a>第一级02-第二级01</a>
							<ul class="three-ul">
								<li><a>第一级02-第二级02-第三级01</a></li>
								<li><a>第一级02-第二级02-第三级02</a></li>
							</ul>
						</li>
						<li class="two-li"><a>第一级02-第二级02</a></li>
						<li class="two-li"><a>第一级02-第二级03</a>
							<ul class="three-ul">
								<li><a>第一级02-第二级03-第三级01</a></li>
								<li><a>第一级02-第二级03-第三级02</a></li>
								<li><a>第一级02-第二级03-第三级03</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li class="one-li">
					<a>第一级03</a>
				</li>
			</ul>
		</header>
		<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("ul li.one-li").hover(
	            function () {
	                $(this).addClass("hover");
	                $("ul:first", this).css("display", "block");
	            },
	            function (event) {
	                $(this).removeClass("hover");
	                $("ul:first", this).css("display", "none");
	            });
				$("ul li.one-li ul li:has(ul)").find("a:first").append(" >");
				$("ul li.one-li ul li:has(ul)").click(function(){
					$("ul:first", this).slideToggle(300);
				});
			});
		</script>
	</body>
</html>

jsjiang_

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
利用jq写的三级导航栏

点击二级栏目显示三级,自己修改一下引用jq.js的地址<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>三级导航栏</title> <style type="text/css"> *{margin: 0;padding:...
复制链接

扫一扫