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

时间:2023-03-09 00:15:34
jQuery手写几个常见的滑动下拉菜单 分分秒秒学习JS

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

案例1 效果如图所示:

aaarticlea/png;base64,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" alt="" />

在书写这个滑动的下拉菜单的时候,我们首先来认识下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

小强零零壹 和你一同进步