jQuery下拉菜单实现-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_33574890/article/details/78259766

下拉列表

注意：

1在实际操作的时候，没有清除默认样式，导致ul总是有默认缩进，清除默认样式就可以了。

2 关于元素的背景色，我利用了jQuery的hover事件，这个事件很好用，先用闭包先保存dom原来的背景色，当mouseout的时候再恢复为原来的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
	       ul li{
	       	list-style: none;
	       	position: relative;
	       }
	       a{
	       	color: white;
	       	text-decoration: none;
	       }
	       
	        a{
	       	display: inline-block;
	       	width: 100px;
	       	height: 20px;
	       	background: rgb(47,52,68);
	       }
	   
	       
		</style>
	
	</head>
	<body>
		<div id="div">
			<div id="">
				<ul>
					<li><a href="">核心</a>
						<ul>
							<li><a href="">jquery</a></li>
							<li><a href="">length</a></li>
							<li><a href="">selector</a></li>
						</ul>
					</li>
					<li><a href="">选择器</a>
						<ul>
							<li><a href="">：d</a></li>
							<li><a href="">#id</a></li>
							<li><a href="">:first</a></li>
						</ul>
							
					</li>
					<li><a href="">属性</a>
						<ul>
							<li><a href="">remove</a></li>
							<li><a href="">prop</a></li>
							<li><a href="">removeprop</a></li>
						</ul>
						
					</li>
					
					
				</ul>
			</div>
			<div id="">
				
			</div>
		</div>
		

<script src="js/jquery-3.2.1.min.js">
	
</script>
<script>
	$('li>ul').hide();
	
	(function(){
		var bkc;
		$('ul:first>li>a').hover(function(){
		bkc=$(this).css('background');
		$(this).css('background','red')
	},function(){
		$(this).css('background',bkc);
	})//设置滑过背景色改变效果
	.click(function(){
		$(this).parent().children('ul').toggle('fast');
		return false;
	})//设置点击下拉框出现效果
	})()
	

</script>

</body>
</html>