jq 菜单-js和jq通过点击实现

客官°小女子只卖身不卖艺 2021-07-24 15:41 433阅读 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 t1(){ 
    				$("#na").toggle(300);   //以点击淡出、显示的方式来展示div
    				$("#naImg").attr("src","img/close.gif");
    			}
    			
    			var flag=true;
    			var blag=true;
    			function testNa()
    			{ 
    				if(flag){ 
    					$("#na").slideUp(1000);
    					$("#naImg").attr("src","img/close.gif");
    					flag=false;
    				}else{ 
    					$("#na").slideDown(1000);
    					$("#naImg").attr("src","img/open.gif");
    					flag=true;
    				}
    			}
    			
    			function testNa2()
    			{ 
    				if(blag)
    				{ 
    					$("#div01").slideUp(1000);
    					$("#na2").attr("src","img/close.gif");
    					blag=false;
    				}else{ 
    					$("#div01").slideDown(1000);
    					$("#na2").attr("src","img/open.gif");
    					blag=true;
    				}
    			}
    		</script>
    		<style type="text/css">
    			li{ 
    				list-style-type:none;
    			}
    			
    			#na{ 
    				position:relative;
    				left:20px;
    			}
    			#div01{ 
    				position:relative;
    				left:20px;
    			}
    		</style>
    	</head>
    	<body>
    		<hr />
    		
    		<ul>
    			<img src="img/open.gif" alt="" id="naImg" /> <label onclick="testNa()">国际动态 </label>
    			<div id="na">
    			<li><img src="img/item.gif" alt="" /><label for="">国内新闻</label></li>
    			<li><img src="img/item.gif" alt="" /><label for="">国际新闻</label></li>	
    				
    			</div>
    			<br />
    			<img src="img/open.gif" alt="" id="na2" /> <label for="" onclick="testNa2()">国际品牌</label>
    			
    			<div id="div01">
    				<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>
    	</body>
    </html>