jQuery手写几个常见的滑动下拉菜单分分秒秒学习JS

浏览数：20 / 时间：2015年06月09日

一般的企业网站再我们再实际工作中，有些特效，用jQuery来做，显得极其简单，除非一些大的公司，需要封装自己的类。今天，我们讲解jQuery入门知识，来写几个简单jQuery滑动下拉菜单。感受一下jQuery的简单快速的神奇之处。
学完本章，可以书写最常见的下拉菜单写法。

案例1 效果如图所示：

在书写这个滑动的下拉菜单的时候，我们首先来认识下jQuery里面的滑动方法 :slideToggle（）

slideToggle(执行时间,运动方式，返回函数)

执行时间：常用的是

"slow" 慢速
"normal" 正常
"fast" 快速

但是常用还是毫秒比如 300 就是 300毫秒

好了，这个案例的原理，就是先把一级菜单写出来，当鼠标经过的时候，会把相应的二级菜单显示出来。但是我们利用的是滑动显示。

html 代码如下：

<ul class="all">
	<li>一级菜单
		<ul>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
		</ul>
	</li>
	<li>一级菜单
		<ul>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
		</ul>
	</li>
	<li>一级菜单
		<ul>
			<li>二级菜单</li>
			<li>二级菜单</li>
			<li>二级菜单</li>
		</ul>
	</li>
</ul>

首先我们先书写css样式（合理简洁的css样式写法，会让我们书写js更简单哦）

<style type="text/css">
*{ padding:0; margin:0; list-style:none;}
.all{ width:330px; height:30px; margin:100px auto; background:url(img/bg.jpg); padding-left:10px;}
.all li{ width:100px; height:30px; background:url(img/libg.jpg); line-height:30px; text-align:center; float:left; margin-right:10px; _display:inline; position:relative; cursor:pointer;}
.all ul{ position:absolute; left:0; top:30px; display:none;}
</style>

注意，二级菜单一定先隐藏哦

然后，我们准备 js代码

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){

	$(‘.all>li‘).hover(function(){
		$(this).children().stop().slideToggle(300);
	})
})
</script>

书写js 代码，有三点需要注意：

1.别忘了引js文件包。
2. hover我们知道，就是 mouseover和mouseout的合体写法
3. 我们发现再slideToggle()前面写了stop() 就是为了防止jQuery的排队机制。
下面小强老师给大家准备了demo文件下载，大家可以好好看看哦。

deom下载地址：http://pan.baidu.com/s/1sjk9XSh

jQuery手写几个常见的滑动下拉菜单分分秒秒学习JS,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jQuery手写几个常见的滑动下拉菜单分分秒秒学习JS