JavaScript+jQuery實現簡單的動態菜單

時間 2019-11-12

標籤 javascript+jquery javascript jquery 實現簡單動態菜單欄目 JavaScript 简体版

原文原文鏈接

1.jQuery:(使用時咱們須要導入Jquery文件)

jQuery 是一個 JavaScript 庫。javascript

jQuery 極大地簡化了 JavaScript 編程。css

2.下面是咱們的代碼實現

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!-- 導入css樣式 -->
	<link rel="stylesheet" type="text/css" href="css/Annm.css">
	<!-- 導入jQuery文件 -->
	<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
	<script type="text/javascript">
		//jQuery方法
		$(document).ready(function(){
			//獲取主菜單：公告管理。聲明一個單擊函數
			$(".main > a").click(function(){
				//獲取主菜單下面的子菜單ul
				var ulObject=$(this).next("ul");
				//slideToggle經過高度變化來切換全部匹配元素的可見性，並在切換完成後可選地觸發一個回調函數。
				ulObject.slideToggle();
				//調用使三角形變化的函數這裏$(".main>a")也能夠換成this即demo(this).
				demo($(".main > a"));
			});
		});
		function demo(mNode){
			//判斷是不是根節點
			if(mNode){
				if(mNode.css("background-image").indexOf("collapsed.gif")>=0){
					//索引值大於等於0變換圖片背景
					mNode.css("background-image","url('image/images2/expanded.gif')");
				}else{
					mNode.css("background-image","url('image/images2/collapsed.gif')");
				}
			}
		}
	</script>
	
		
	
  </head>
  
  <body>
    	<ul>
    		<li class="main">
    			<a href="#">公告管理</a>
    			<ul>
    				<li><a href="#">增長</a></li>
    				<li><a href="#">刪除</a></li>
    				<li><a href="#">修改</a></li>
    				<li><a href="#">查詢</a></li>
    			</ul>
    		</li>
    	</ul>
  </body>
</html>

3.css樣式

body{
	padding: 0px;
	margin: 0px;
}
ul li{
	list-style: none;
}
/*消除縮進*/

ul{
	padding: 0px;
	margin: 0px;
}
/*給主菜單添加背景圖片*/
.main{
	background-image: url("../image/images2/title.gif");
	background-repeat: repeat-x;
	width: 120px;
}
li{
	background-color: #eeeeee;
}
a{
	text-decoration: none;
	padding-left: 20px;
	display: inline-block;
	width: 100px;
	padding-top: 5px;
	padding-bottom: 3px;
}
/*設置主菜單*/
.main a{
	color: white;
	background-image: url("../image/images2/collapsed.gif");
	background-repeat: no-repeat;
	background-position: 3px center;
}
/*設置子菜單*/
.main li a{
	color: black;
	background-image: none;
}
/*隱藏子菜單*/
.main ul{
	display: none;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。