jQuery手寫幾個常見的滑動下拉菜單 分分秒秒學習JS

一般的企業網站再我們再實際工作中，有些特效，用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

小強零零壹 和你一同進步