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

太过爱你忘了你带给我的痛 2022-09-27 12:28 179阅读 0赞

<!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>