jq菜单-jq页面加载方式

朴灿烈づ我的快乐病毒、 2021-07-24 17:04 467阅读 0赞

<html>
    	<head>
    		<meta charset="utf-8">
    		<title>jq 菜单案例</title>
    		<script type="text/javascript" src="js/jquery-3.4.1.js" charset="utf-8"></script>
    		<script type="text/javascript">
    	
    
    		
    			
    			$(function(){ 
    				$("ul>label:first").mouseover(function (){ 
    				
    					$("#na").slideDown(1000);
    					$("#naImg").attr("src","img/close.gif");
    	
    				})
    				
    				$("ul>label:first").mouseout(function (){ 
    			
    					$("#na").slideUp(1000);
    					$("#naImg").attr("src","img/open.gif");
    			}) })
    		
    		
    		$(function(){ 
    			$("#b2").mouseover(		
    					function(){ 
    					$("#div01").slideDown(1000);
    					$("#na2").attr("src","img/close.gif");
    				})
    			$("#b2").mouseout(			
    					function(){ 
    					$("#div01").slideUp(1000);
    					$("#na2").attr("src","img/open.gif");
    				})
    		})
    		</script>
    		<style type="text/css">
    			li{ 
    				list-style-type:none;
    			}
    			
    			#na{ 
    				position:relative;
    				left:20px;
    			}
    			#div01{ 
    				position:relative;
    				left:20px;
    			}
    			#d2,#d3{ 
    				float:left;
    			}
    			
    		</style>
    	</head>
    	<body>
    
    		<hr />
    		
    		<div id="d2">
    		<ul>
    			<img src="img/open.gif" alt="" id="naImg" /> <label id="b1">国际动态 </label>
    			<div id="na" style="display: none;">
    			<li><img src="img/item.gif" alt="" /><label for="">国内新闻</label></li>
    			<li><img src="img/item.gif" alt="" /><label for="">国际新闻</label></li>	
    				
    			</div>
    		</ul>
    		</div>
    		
    		<div id="d3">
    		<ul>
    			<img src="img/open.gif" alt="" id="na2" /> <label for="" id="b2">国际品牌</label>
    			
    			<div id="div01" style="display:none">
    				<li><img src="img/item.gif" alt="" /><label for="">阿迪达斯</label></li>
    				<li><img src="img/item.gif" alt="" /><label for="">NiKE</label></li>
    				<li><img src="img/item.gif" alt="" /><label for="">匡威</label></li>
    				<li><img src="img/item.gif" alt="" /><label for="">AddNice</label></li>
    				<li><img src="img/item.gif" alt="" /><label for="">李宁</label></li>
    				<li><img src="img/item.gif" alt="" /><label for="">Lee</label></li>
    			</div>
    		</ul>
    		</div>
    	</body>
    </html>