跟我学JQuery---------------第三课-CSDN博客

本文链接：https://blog.csdn.net/a414129902/article/details/83953514

上第三课之前，希望大家把前2节课的知识练习一下，至少多Jquery这些api一下就能写出来，不要老去翻笔记，这样就体现不出你的水平了，第一课的比较容易，第二课的input.trigger("focus").trigger("select")和tdObj.children("input")以及var keycode = event.which; 稍微不留点神可能一下想不起来。对于基础的多加练习，把基础打牢。

今天讲的案例是: 横向和纵向菜单

menu.css

ul, li {
	/*清除ul和li上默认的小圆点*/
	list-style: none;
}
ul {
	/*清除子菜单的缩进值*/
	padding: 0;
	margin: 0;
}
.main, .hmain {
	background-image: url(../images/title.gif);
	background-repeat: repeat-x;
	width: 120px;
}
li {
	background-color: #EEEEEE;
}
a {
	/*取消所有的下划线*/
	text-decoration: none;
	padding-left: 20px;
	display: block;
	display: inline-block;
	width: 100px;
	padding-top: 3px;
	padding-bottom: 3px;
}
.main a, .hmain a {
	color: white;
	background-image: url(../images/collapsed.gif);
	background-repeat: no-repeat;
	background-position: 3px center;
}
.main li a, .hmain li a {
	color: black;
	background-image: none;
}
.main ul, .hmain ul {
	display: none;
}
.hmain {
	float: left;
	margin-right: 1px;
}

menu.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>JQuery实战-菜单效果</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link type="text/css" rel="stylesheet" href="css/menu.css" />
		<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
		<script type="text/javascript" src="js/menu1.js"></script>
	</head>
	<body>
		<ul>
			<li class="main">
					<a href="#">菜单项1</a>
				<ul>
					<li>
						<a href="#">子菜单项11</a>
					</li>
					<li>
						<a href="#">子菜单项12</a>
					</li>
				</ul>
			</li>
			<li class="main">
				<a href="#">菜单项2</a>
				<ul>
					<li>
						<a href="#">子菜单项21</a>
					</li>
					<li>
						<a href="#">子菜单项22</a>
					</li>
				</ul>
			</li>
			<li class="main">
				<a href="#">菜单项3</a>
				<ul>
					<li>
						<a href="#">子菜单项31</a>
					</li>
					<li>
						<a href="#">子菜单项32</a>
					</li>
				</ul>
			</li>
		</ul>
		<br />
		<br />
		<br />
		<ul>
			<li class="hmain">
					<a href="#">菜单项1</a>
				<ul>
					<li>
						<a href="#">子菜单项11</a>
					</li>
					<li>
						<a href="#">子菜单项12</a>
					</li>
				</ul>
			</li>
			<li class="hmain">
				<a href="#">菜单项2</a>
				<ul>
					<li>
						<a href="#">子菜单项21</a>
					</li>
					<li>
						<a href="#">子菜单项22</a>
					</li>
				</ul>
			</li>
			<li class="hmain">
				<a href="#">菜单项3</a>
				<ul>
					<li>
						<a href="#">子菜单项31</a>
					</li>
					<li>
						<a href="#">子菜单项32</a>
					</li>
				</ul>
			</li>
		</ul>
	</body>
</html>

menu.js

$(document).ready(function(){
	
	//$(".main > a") 跟 $(".main  a")一样都是取到classname是.main元素的子元素a
	//记得第一课讲了.classname 和#idname
	$(".main > a").click(function(){
		var ulNode = $(this).next("ul");
		
		//第一种方式：show动画显示 默认是fast ,加上slow是慢，还可以加上时间show("4000")，hide相反
		//此效果是点击显示并自动隐藏  更多效果可以参考api文档
		//ulNode.show("slow");
		//ulNode.hide("slow");
		
		//第二种方式：toggle相当于做了判断，如果隐藏，就显示，相反则隐藏
		//相当于
		/*
		if (ulNode.css("display") == "none") {
			ulNode.css("display","block");
		} else {
			ulNode.css("display","none");
		}
		*/
		//不同的是加了动画效果
		//ulNode.toggle("slow");
		
		//第三种方式:和二是一样的，动画效果有点不同
		ulNode.slideToggle();
		
		//第四种凡是：和第一种是一样的效果，动画效果不同而已
		//ulNode.slideDown("slow");
		//ulNode.slideUp("slow");
		
		changeIcon($(this));
	});
	$(".hmain").hover(function(){
		 $(this).children("ul").slideDown("slow");
		 changeIcon($(this).children("a"));
	},function(){
		$(this).children("ul").slideUp("slow");
		 changeIcon($(this).children("a"));
	});
	
	
	function changeIcon(menu){
		if(menu.css("background-image").indexOf("collapsed.gif") >0){
			menu.css("background-image","url('images/expanded.gif')");
		}else{
			menu.css("background-image","url('images/collapsed.gif')");
		}
	}
})

效果图：