首頁  >  文章  >  web前端  >  使用jQuery實現各種下拉式選單功能效果的方法總結

使用jQuery實現各種下拉式選單功能效果的方法總結

伊谢尔伦
伊谢尔伦原創
2017-06-02 14:26:054853瀏覽

jQuery是javascript的一個函式庫,使用起來非常的方便,功能也是十分的強大。通常,只有選單條顯示在視窗中,當滑鼠指標指向選單條時,選單條的子選單才會顯示出來。當滑鼠指標離開選單時,子選單則隱藏起來,回到只顯示主選單條的狀態。根據下拉式選單的這種特點,我們可以使用jQuery技術來實現這些功能。這篇文章就來具體說明jQuery技術來實現下拉式選單的功能。

一、可以先了解《形形色色的下拉式選單實作教學》中的相關內容介紹

使用jQuery實現各種下拉式選單功能效果的方法總結


##本課程從易到難,循循漸進,從靜態網頁佈局,到運用HTML/CSS、JavaScript、jQuery不同技術實現動態下拉選單,讓您掌握下拉選單的製作及在不同瀏覽器間進行程式碼調試,解決瀏覽器相容問題。 二、jQuery實作下拉選單功能與效果

#1. 

jquery選擇select下拉選單option項目觸發事件

在很多應用程式中,選取一個select下拉選項就會觸發一個事件,執行對應的操作。以下就透過程式碼實例介紹如何利用jquery實作此功能,程式碼選取出去第一項以外的所以選項都可以把value值寫入p中。 2. 

jquery下拉選單的實作心得

使用jQuery實現各種下拉式選單功能效果的方法總結

第一部分:

新增了下了選單的觸發按鈕

第二部分:綁定了一個click事件的處理函數,觸發按鈕被click後給下拉式選單最外層的li綁定hover處理函數,感覺是比較巧妙的地方。 給最外層的li綁定hover函數,這裡處理函數寫的是當滑鼠懸停在li上時不做任何處理(第一函數為空),當滑鼠離開時li收起。

這樣一來,後面展開ul的選單都是最外層的li裡面,這樣選單就不會自動收起了,也就是等於是滑鼠離開了整個選單,li會自動收起。

第三部分:

給選單下中巢狀的ul的hover事件綁定函數,用於展開和收起下一層選單。同時也給下一層選單綁定了收起的處理函數,與觸發選單中click給最外層li綁定的收起函數一同作用,是想選單的自動收起功能。

3.

一個jQuery下拉選單,程式碼簡單

#一個簡單的jQuery下拉選單,程式碼很少,很適合有基礎的新手學習提升。實作也是非常的簡單,主要透過jQuery程式碼,當滑鼠指標指向選單條時,選單條的子選單才會顯示出來。當滑鼠指標離開選單時,子選單則隱藏起來,回到只顯示主選單條的狀態。 4. 

jQuery實作的導覽下拉式功能表效果

使用jQuery實現各種下拉式選單功能效果的方法總結

#導覽效果(相容IE6)

##1)使用$("#navigation ul li:has(ul)")函數來選擇含有
    元素的
  • 元素,然後為它們添加hover事件,

    2)在hover事件的第一個函數內,使用$(this).children("ul")找到
  • 元素內部的

以上是使用jQuery實現各種下拉式選單功能效果的方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn