jquery点击下拉菜单鼠标移开隐藏(可模拟下拉框)

最新推荐文章于 2022-10-11 10:49:25 发布

原创最新推荐文章于 2022-10-11 10:49:25 发布 · 2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #下拉框 #下拉菜单 #点击展开

div+css 同时被 3 个专栏收录

89 篇文章

订阅专栏

javascript

40 篇文章

订阅专栏

jquery

39 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的导航栏下拉菜单效果。该菜单包括多个顶级导航项，每个导航项在鼠标悬停时会展开显示子链接。通过jQuery简化了DOM操作，实现了平滑的展开和收起动画。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
	$("ul.subnav").parent().append("<span></span>");	
	$("ul.topnav li span").click(function() { 
		$(this).parent().find("ul.subnav").slideDown('fast').show(); 
		$(this).parent().hover(function() {
		}, function(){	
			$(this).parent().find("ul.subnav").slideUp('slow'); 
		});
		}).hover(function() { 
			$(this).addClass("subhover"); 
		}, function(){
			$(this).removeClass("subhover"); 
	});
	$("ul.subnav li").each(function(i){
		$(this).bind("click",function(){
			$(this).parent().parent().find("a.sname").text($(this).find("a").text());  
			$(this).parent().hide();
		}); 			
	});	

});
</script>
<style type="text/css">
body{margin:0;padding:0;font:10px normal Arial, Helvetica, sans-serif;}
/* container */
.container{ width:1200px; margin:0 auto;}
ul.topnav{list-style:none;padding:0 20px;	width:100%;height:35px;background:#222;font-size:1.2em;background:#08A3BC;}
ul.topnav li{float:left;height:35px; width:120px; text-align:center; position:relative;}
ul.topnav li a{padding:10px 5px;color:#fff;display:block;text-decoration:none;}
ul.topnav li a:hover{background:#0C74F0;}
ul.topnav li span{height:35px; width:120px; text-align:center; display:block; position:absolute; left:0; top:0;}
ul.topnav li span.subhover{background-position:center bottom;cursor:pointer;} 
ul.topnav li ul.subnav{list-style:none;position:absolute;left:0;top:35px;background:#333;margin:0;padding:0;display:none;float:left;width:170px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;border:1px solid #111;}
ul.topnav li ul.subnav li{margin:0;padding:0;border-top:1px solid #252525;border-bottom:1px solid #444;clear:both;width:170px;}
ul.topnav li ul.subnav li a{float:left;width:145px;background:#333;padding-left:20px;}
ul.topnav li ul.subnav li a:hover{background:#222;}
</style>

</head>
<body>

<div class="container">
	<ul class="topnav">
		<li><a href="#">Home</a></li>
		<li>
			<a href="#" class="sname">Tutorials</a>
			<ul style="display: none;" class="subnav">
				<li><a href="#">Sub Nav Link1</a></li>
				<li><a href="#">Sub Nav Link2</a></li>
				<li><a href="#">Sub Nav Link3</a></li>
				<li><a href="#">Sub Nav Link4</a></li>
				<li><a href="#">Sub Nav Link5</a></li>
			</ul>
		</li>
		<li>
			<a href="#" class="sname">Resources</a>
			<ul style="display: none;" class="subnav">
				<li><a href="#">Sub Nav Link1</a></li>
				<li><a href="#">Sub Nav Link2</a></li>
				<li><a href="#">Sub Nav Link3</a></li>
				<li><a href="#">Sub Nav Link4</a></li>
				<li><a href="#">Sub Nav Link5</a></li>
			</ul>
		</li>
		<li><a href="#">About Us</a></li>
		<li><a href="#">Advertise</a></li>
		<li><a href="#">Submit</a></li>
		<li><a href="#">Contact Us</a></li>
	</ul>
</div>
</body>
</html>