jQuery實現風琴菜單,超級簡單,一行代碼!

問題描述:使用jQuery實現風琴菜單的效果

代碼比較簡單,直接上代碼了,JQuery的文件,這裏沒有給。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>風琴菜單</title>
 </head>
 	<style type="text/css">
		#div1{
			width:200px;
			height:400px;
			border:1px solid black;
		}
		.menu{
			height:20px;
			background:blue;
			color:white;
			border:1px solid black;
			margin-top:1px;
			cursor:pointer;
		}
		.item{
			height:18px;
			background:green;
			color:white;
			border:1px solid black;
			margin-top:1px;
		}
		.sub{
			display:none
		}
	
	</style>
 <body>
	 <div id="div1">
    	<div class="menu">辦公管理</div>
    	  <div class="sub">
	    	<div class="item">人員管理</div>
	    	<div class="item">倉儲管理</div>
	      </div>
    	<div class="menu">公文管理</div>
    	  <div class="sub">
	    	<div class="item">收發公文</div>
	    	<div class="item">日誌管理</div>
	      </div>
    	<div class="menu">系統管理</div>
    	  <div class="sub">
	    	<div class="item">權限管理</div>
	    	<div class="item">角色管理</div>
	      </div>
    </div>
 </body>
 <script src=" jquery-1.11.1.min.js "></script>
	<script>
		$(".menu").click(function(){
				$(this).next(".sub").slideToggle("slow").siblings(".sub").slideUp("slide");
			});
	</script>
</html>
用jQuery實現,比用原生的JavaScript實現簡單了很多,而且也比較容易理解.

快樂學習,快樂編程

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章