jQuery————02

Bug码畜

已于 2022-03-04 00:10:03 修改

阅读量531

点赞数

分类专栏： jQuery 文章标签：前端 jquery javascript html css

于 2022-03-04 00:08:50 首次发布

本文链接：https://blog.csdn.net/qq_52158380/article/details/123266924

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这个博客展示了如何使用jQuery创建一个响应式的二级下拉菜单。HTML源码定义了菜单结构，CSS设置样式，JavaScript部分利用jQuery的`hover`、`fadeIn`和`fadeOut`方法实现了菜单项悬停时子菜单的淡入淡出效果。

摘要由CSDN通过智能技术生成

HTML源码

<!DOCTYPE html>
<html>
	<head>
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<title></title>
	</head>
	<body>
		<div id="menu">
			<ul id="lis">
				<li>首页
				<ul>
					<li> <a href="">html</a></li>
					<li> <a href="">html5</a></li>
					<li> <a href="">web</a></li>
				</ul>
				</li>
				<li>JavaScript
				<ul>
					<li> <a href="">教程</a></li>
					<li> <a href="">实例</a></li>
					<li> <a href="">测试</a></li>
				</ul>
				</li>
				<li>Jquery
					<ul>
					<li> <a href="">教程</a></li>
					<li> <a href="">实例</a></li>
					<li> <a href="">测试</a></li>
					</ul>
					
				</li>
				<li>Vue
					<ul>
					<li> <a href="">教程</a></li>
					<li> <a href="">实例</a></li>
					<li> <a href="">测试</a></li>
					</ul>
					
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			$(function(){
				 $('#lis>li:has(ul)').hover(function(){
					 $(this).find('li').fadeIn(500);//find是jQuery的遍历方法
				 },
				 function(){
					 $(this).find('li').fadeOut(300);//fadein,fadeout淡入淡出，淡入是显示，淡出是隐藏
				 })
			})
		</script>
	</body>
</html>

css代码块

*{
	margin: 0;
	padding: 0;
}
#menu{
	position: relative;
	width: 1440px;
	font-size: 24px;
	font-family: "宋体","times new roman",arial;
	margin: 0 0 0 120px;
}
#menu li{
	width:320px;
}

a{
	width: 320px;
	text-decoration: none;
	
}
#menu ul li{
	width:320px;
	float: left;
	list-style: none;
	text-align: center;
	background-color: aqua;
	color: green;
	line-height: 45px;
}
#menu ul li:hover{
	background-color: #00868B;
	color: white;
}

#lis li{	
	border: 1px black solid;
}
#menu ul li ul li{
	background-color: #98F5FF;
	margin: 0px;
	border: 1px dashed black;
}

#menu ul li ul li{
	width: 320px;
	display: none;
}
#lis a:hover{
	background-color: greyblue;
	color: white;
}
#lis a:active{
	color: red;
}