分享我的jquery實(shí)現(xiàn)下拉菜單心的
更新時(shí)間：2015年11月29日 11:29:07 作者：ncp6
jquery庫(kù)給我們帶來(lái)了很多方便的地方，使用jquery實(shí)現(xiàn)一個(gè)簡(jiǎn)單的下拉菜單已經(jīng)是很簡(jiǎn)單了，但也有不同的實(shí)現(xiàn)方法。今天自己使用jquery寫(xiě)了一個(gè)下拉菜單，參考了Xiaofeng Wang的SexyDropDownMenu2010，其中還是有一些東西感覺(jué)值得記錄一下。
摘要：
jquery庫(kù)給我們帶來(lái)了很多方便的地方，使用jquery實(shí)現(xiàn)一個(gè)簡(jiǎn)單的下拉菜單已經(jīng)是很簡(jiǎn)單了，但也有不同的實(shí)現(xiàn)方法。今天自己使用jquery寫(xiě)了一個(gè)下拉菜單，參考了Xiaofeng Wang的SexyDropDownMenu2010，其中還是有一些東西感覺(jué)值得記錄一下。
實(shí)現(xiàn)：
首先上他的代碼（把全部的代碼貼上來(lái)太長(zhǎng)了，就撿部分吧），
一、html中ul列表
<ul class="topmenu">
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a>
<ul class="submenu1">
<li><a href="#">Ch1</a></li>
<li><a href="#">Ch2</a>
<ul class="submenu11">
<li><a href="#">Ch21</a>
<ul class="submenu11">
<li><a href="#">Ch211</a>
<ul class="submenu11">
<li><a href="#">Ch2111</a>
<ul class="submenu11">
<li><a href="#">Ch21111</a></li>
<li><a href="#">Ch21112</a></li>
<li><a href="#">Ch21113</a></li>
<li><a href="#">Ch21114</a></li>
<li><a href="#">Ch21115</a></li>
<li><a href="#">Ch21116</a></li>
</ul>
</li>
<li><a href="#">Ch2112</a></li>
<li><a href="#">Ch2113</a></li>
<li><a href="#">Ch2114</a></li>
<li><a href="#">Ch2115</a></li>
</ul>
</li>
<li><a href="#">Ch212</a></li>
<li><a href="#">Ch213</a></li>
<li><a href="#">Ch214</a></li>
</ul>
</li>
<li><a href="#">Ch22</a>
<ul class="submenu11">
<li><a href="#">Ch221</a></li>
<li><a href="#">Ch222</a></li>
<li><a href="#">Ch223</a></li>
</ul>
</li>
<li><a href="#">Ch23</a></li>
</ul>
</li>
<li><a href="#">Ch3</a>
<ul class="submenu11">
<li><a href="#">Ch31</a></li>
<li><a href="#">Ch32</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Resources</a>
<ul class="submenu1">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Submit</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
其中為六層深度的菜單結(jié)構(gòu)，如下圖
二、js部分（css就不貼出來(lái)了）
$(document).ready(function() {
//第一部分
// Top Menu
//Only shows drop down trigger when js is enabled (Adds empty span tag after ul.submenu1*)
$("ul.submenu1").parent().append("<span></span>");
//第二部分
$("ul.topmenu li span").click(function() { //When trigger is clicked...
//Following events are applied to the submenu1 itself (moving submenu1 up and down)
//Drop down the submenu1 on click
$(this).parent().find("ul.submenu1").slideDown('fast').show();
//在click后給綁定hover處理函數(shù)，感覺(jué)是比較巧妙的地方
$(this).parent().hover(function() {
}, function() {
//When the mouse hovers out of the submenu1, move it back up
$(this).parent().find("ul.submenu1").slideUp('slow');
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
//On hover over, add class "hover"
$(this).addClass("hover");
}, function() { //On Hover Out
//On hover out, remove class "hover"
$(this).removeClass("hover");
});
//第三部分
$("ul.topmenu li ul.submenu1 li").hover(function() {
$(this).find("ul.submenu11:first").show("slow");
}, function() {
$(this).find("ul.submenu11:first").hide("fast");
});
})；
第一部分：
添加了下了菜單的一個(gè)觸發(fā)按鈕
第二部分：
綁定了一個(gè)click事件的處理函數(shù)
觸發(fā)按鈕被click后給下拉菜單最外層的li綁定hover處理函數(shù)，感覺(jué)是比較巧妙的地方。
給最外層的li綁定hover函數(shù)，這里處理函數(shù)寫(xiě)的是當(dāng)鼠標(biāo)懸停在li上時(shí)不做任何處理（第一函數(shù)為空），當(dāng)鼠標(biāo)離開(kāi)時(shí)li收起。
這樣一來(lái)，后面展開(kāi)ul的菜單都是最外層的li里面，這樣菜單就不會(huì)自動(dòng)收起了，也就是等于是鼠標(biāo)離開(kāi)了整個(gè)菜單，li會(huì)自動(dòng)收起。
第三部分：
給菜單下中嵌套的ul的hover事件綁定函數(shù)，用于展開(kāi)和收起下一級(jí)菜單
$(this).find("ul.submenu11:first")也是比較巧妙的通過(guò)find獲得當(dāng)前匹配元素集合中每個(gè)元素的后代，并通過(guò)“ul.submenu11:first”篩選活動(dòng)下一代元素給以展開(kāi)。
同時(shí)也給下一級(jí)菜單綁定了收起的處理函數(shù)，與觸發(fā)菜單中click給最外層li綁定的收起函數(shù)一同作用，是想菜單的自動(dòng)收起功能。
總結(jié)：
其中展現(xiàn)了jquery篩選器的強(qiáng)大和靈活，也體現(xiàn)jquery優(yōu)美的鏈?zhǔn)秸Z(yǔ)法。
下面給大家分享一段純jQuery水平下拉菜單實(shí)現(xiàn)
<!DOCTYPE html>
<html>
<head>
<title>jQuery水平下拉菜單實(shí)現(xiàn)</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" charset="UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="bootstrap/js/jquery-1.11.1.min.js"></script>
<!--[if lt IE 9]>
<script src="bootstrap/js/html5shiv.js"></script>
<script src="bootstrap/js/respond.min.js"></script>
<![endif]-->
<style type="text/css">
.menus{border:1px solid red; float:left; margin-left:4px; background:red;}
.menus a{display:block; width:100px; text-align:center;}
.menu{display:none;}
a{cursor:pointer;text-decoration:none;}
a:hover{background:white; text-decoration:none;}
a:visited{text-decoration:none; color:black;}
</style>
<script>
$(function(){
$(".menu-title").click(function(){
$(this).next().toggleClass();
});
});
</script>
</head>
<body>
<div class="menus">
<a class="menu-title">菜單項(xiàng)</a>
<div class="menu">
<a href="#" class="menu-item">菜單列表</a>
<a href="#" class="menu-item">菜單列表</a>
<a href="#" class="menu-item">菜單列表</a>
<a href="#" class="menu-item">菜單列表</a>
</div>
</div>
<div class="menus">
<a class="menu-title">菜單項(xiàng)</a>
<div class="menu">
<a href="#" class="menu-item">菜單列表</a>
<a href="#" class="menu-item">菜單列表</a>
<a href="#" class="menu-item">菜單列表</a>
<a href="#" class="menu-item">菜單列表</a>
</div>
</div>
<div class="menus">
<a class="menu-title">菜單項(xiàng)</a>
<div class="menu">
<a href="#" class="menu-item">菜單列表</a>
<a href="#" class="menu-item">菜單列表</a>
<a href="#" class="menu-item">菜單列表</a>
<a href="#" class="menu-item">菜單列表</a>
</div>
</div>
<div class="menus">
<a class="menu-title">菜單項(xiàng)</a>
<div class="menu">
<a href="#" class="menu-item">菜單列表</a>
<a href="#" class="menu-item">菜單列表</a>
<a href="#" class="menu-item">菜單列表</a>
<a href="#" class="menu-item">菜單列表</a>
</div>
</div>
</body>
</html>
您可能感興趣的文章:
- jQuery+CSS 實(shí)現(xiàn)的超Sexy下拉菜單
- jquery 多級(jí)下拉菜單核心代碼
- 用jquery實(shí)現(xiàn)下拉菜單效果的代碼
- 來(lái)自國(guó)外的30個(gè)基于jquery的Web下拉菜單
- jquery仿京東導(dǎo)航/仿淘寶商城左側(cè)分類(lèi)導(dǎo)航下拉菜單效果
- Jquery帶搜索框的下拉菜單
- jQuery點(diǎn)擊彈出下拉菜單的小例子
- JQuery實(shí)現(xiàn)絢麗的橫向下拉菜單
- 巧用jquery解決下拉菜單被Div遮擋的相關(guān)問(wèn)題
- jquery實(shí)現(xiàn)下拉菜單的二級(jí)聯(lián)動(dòng)利用json對(duì)象從DB取值顯示聯(lián)動(dòng)
- 用jquery實(shí)現(xiàn)的一個(gè)超級(jí)簡(jiǎn)單的下拉菜單
- JQuery設(shè)置獲取下拉菜單某個(gè)選項(xiàng)的值(比較全)
- jQuery實(shí)現(xiàn)向下滑出的平滑下拉菜單效果
- jquery實(shí)現(xiàn)很酷的網(wǎng)頁(yè)頂部圖標(biāo)下拉菜單效果
- jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示二級(jí)下拉菜單效果
- jquery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)顯示下劃線的漸變下拉菜單效果代碼
- jquery實(shí)現(xiàn)的淡入淡出下拉菜單效果
相關(guān)文章
jQuery插件EnPlaceholder實(shí)現(xiàn)輸入框提示文字
EnPlaceholder插件支持密碼框哦！實(shí)際對(duì)比同類(lèi)的placeholder插件在ie等瀏覽器下效果要好很多！下面我們來(lái)具體探討下此插件的使用方法吧。2015-06-06
jQuery的bind的函數(shù)在實(shí)際應(yīng)用其實(shí)不是特別多，只是他可以綁定一個(gè)事件，但不會(huì)即時(shí)觸發(fā)，也可以通過(guò)unbind來(lái)解除綁定。2011-04-04
input 和 textarea 輸入框最大文字限制的jquery插件
input 和 textarea 輸入框最大文字限制的jquery插件，需要的朋友可以參考下。2011-10-10
jQuery模仿ToDoList實(shí)現(xiàn)簡(jiǎn)單的待辦事項(xiàng)列表
這篇文章主要介紹了jQuery模仿ToDoList實(shí)現(xiàn)簡(jiǎn)單的待辦事項(xiàng)列表，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
基于Jquery插件Uploadify實(shí)現(xiàn)實(shí)時(shí)顯示進(jìn)度條上傳圖片
這篇文章主要介紹了基于Jquery插件Uploadify實(shí)現(xiàn)實(shí)時(shí)顯示進(jìn)度條上傳圖片的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
jQuery Easyui Treegrid實(shí)現(xiàn)顯示checkbox功能
本文通過(guò)實(shí)例代碼給大家介紹jQuery Easyui Treegrid實(shí)現(xiàn)顯示checkbox功能的方法，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-08-08![jQuery中[attribute^=value]選擇器用法實(shí)例](http://img.jbzj.com/images/xgimg/bcimg6.png)
jQuery中[attribute^=value]選擇器用法實(shí)例
這篇文章主要介紹了jQuery中[attribute^=value]選擇器用法,實(shí)例分析了[attribute^=value]選擇器的功能、定義及匹配以某些值開(kāi)始的元素的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
jQuery獲得頁(yè)面元素的絕對(duì)/相對(duì)位置即絕對(duì)X,Y坐標(biāo)
jQuery獲得頁(yè)面元素的絕對(duì)X,Y坐標(biāo)，可以用offset()方法，下面有個(gè)不錯(cuò)的坐標(biāo)大家可以參考下2014-03-03
使用ajaxfileupload.js實(shí)現(xiàn)ajax上傳文件php版
這篇文章主要介紹了使用ajaxfileupload.js實(shí)現(xiàn)ajax上傳文件php版,需要的朋友可以參考下2014-06-06
javascript中用星號(hào)表示預(yù)錄入內(nèi)容的實(shí)現(xiàn)代碼
在一個(gè)WEB項(xiàng)目中，有一個(gè)比較特殊點(diǎn)的文本框客戶要求實(shí)現(xiàn)在那個(gè)文本框錄入數(shù)據(jù)前先用星號(hào)（*）表示要錄入的信息（那個(gè)文本框要錄入的數(shù)據(jù)位數(shù)是已知的2011-01-01