新浪下拉菜单(jquery版本)

效果展示：
在这里插入图片描述
用jquery写的比原生的js代码更简洁明了，原生js需要获取li元素集合，然后循环给每个li进行添加事件，
而jquery只需要获取jquery元素集合，直接添加事件，就可以给元素集合中的每个元素添加事件，其中是因为jquery底层的隐式循环，不需要自己手动写循环了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
      
      
				margin: 0px;
				padding: 0px;
			}
			ul {
      
      
				list-style: none;
				/* background-color: red; */
				/* width: 800px; */
			}
			#fold {
      
      
				margin: 100px auto;
				width: 85%;
			}
			#fold>li {
      
      
				float: left;
				width: 100px;
				text-align: center;
			}
			#fold>li>a {
      
      
				background-color: lightgray;
				display: inline-block;
				width: 100px;
				height: 30px;
				line-height: 30px;
				color: orange;
				text-decoration: none;
			}
			#fold>li>ul {
      
      
				display: none;
			}
			#fold>li>ul li:hover {
      
      
				background-color: darkorange;
			}
		</style>
		<script src="js/new_file.js"></script>
	</head>
	<body>
		<div id="container">
			<ul id="fold">
				<li>
					<a href="#">微博</a>
					<ul>
						<li>评论</li>
						<li>店铺</li>
						<li>发文</li>
					</ul>
				</li>
				<li>
					<a href="#">微博</a>
					<ul>
						<li>评论</li>
						<li>店铺</li>
						<li>发文</li>
					</ul>
				</li>
				<li>
					<a href="#">微博</a>
					<ul>
						<li>评论</li>
						<li>店铺</li>
						<li>发文</li>
					</ul>
				</li>
				<li>
					<a href="#">微博</a>
					<ul>
						<li>评论</li>
						<li>店铺</li>
						<li>发文</li>
					</ul>
				</li>
			</ul>
		</div>
		<script>
			$(function() {
      
      
				//鼠标经过
				$("#fold>li").mouseover(function() {
      
      
					//$(this) 获取当前正在操作的元素
					//show（）显示元素 hide（）隐藏元素
					$(this).children("ul").show();
				})
				//鼠标离开
				$("#fold>li").mouseout(function() {
      
      
					$(this).children("ul").hide();
				})
			})
		</script>
	</body>
</html>

新浪下拉菜单(jquery版本)

猜你喜欢