分享我的jquery實(shí)現(xiàn)下拉菜單心的
更新時(shí)間：2015年11月29日 11:29:07 作者：ncp6
jquery庫(kù)給我們帶來了很多方便的地方，使用jquery實(shí)現(xiàn)一個(gè)簡(jiǎn)單的下拉菜單已經(jīng)是很簡(jiǎn)單了，但也有不同的實(shí)現(xiàn)方法。今天自己使用jquery寫了一個(gè)下拉菜單，參考了Xiaofeng Wang的SexyDropDownMenu2010，其中還是有一些東西感覺值得記錄一下。
摘要：
jquery庫(kù)給我們帶來了很多方便的地方，使用jquery實(shí)現(xiàn)一個(gè)簡(jiǎn)單的下拉菜單已經(jīng)是很簡(jiǎn)單了，但也有不同的實(shí)現(xiàn)方法。今天自己使用jquery寫了一個(gè)下拉菜單，參考了Xiaofeng Wang的SexyDropDownMenu2010，其中還是有一些東西感覺值得記錄一下。
實(shí)現(xiàn)：
首先上他的代碼（把全部的代碼貼上來太長(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就不貼出來了）
$(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ù)，感覺是比較巧妙的地方
$(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ù)，感覺是比較巧妙的地方。
給最外層的li綁定hover函數(shù)，這里處理函數(shù)寫的是當(dāng)鼠標(biāo)懸停在li上時(shí)不做任何處理（第一函數(shù)為空），當(dāng)鼠標(biāo)離開時(shí)li收起。
這樣一來，后面展開ul的菜單都是最外層的li里面，這樣菜單就不會(huì)自動(dòng)收起了，也就是等于是鼠標(biāo)離開了整個(gè)菜單，li會(huì)自動(dòng)收起。
第三部分：
給菜單下中嵌套的ul的hover事件綁定函數(shù)，用于展開和收起下一級(jí)菜單
$(this).find("ul.submenu11:first")也是比較巧妙的通過find獲得當(dāng)前匹配元素集合中每個(gè)元素的后代，并通過“ul.submenu11:first”篩選活動(dòng)下一代元素給以展開。
同時(shí)也給下一級(jí)菜單綁定了收起的處理函數(shù)，與觸發(fā)菜單中click給最外層li綁定的收起函數(shù)一同作用，是想菜單的自動(dòng)收起功能。
總結(jié)：
其中展現(xiàn)了jquery篩選器的強(qiáng)大和靈活，也體現(xiàn)jquery優(yōu)美的鏈?zhǔn)秸Z法。
下面給大家分享一段純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)下拉菜單效果的代碼
- 來自國(guó)外的30個(gè)基于jquery的Web下拉菜單
- jquery仿京東導(dǎo)航/仿淘寶商城左側(cè)分類導(dǎo)航下拉菜單效果
- Jquery帶搜索框的下拉菜單
- jQuery點(diǎn)擊彈出下拉菜單的小例子
- JQuery實(shí)現(xiàn)絢麗的橫向下拉菜單
- 巧用jquery解決下拉菜單被Div遮擋的相關(guā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)滑過顯示二級(jí)下拉菜單效果
- jquery實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示下劃線的漸變下拉菜單效果代碼
- jquery實(shí)現(xiàn)的淡入淡出下拉菜單效果
相關(guān)文章
在使用PDFObject.js時(shí)，由于后臺(tái)需要轉(zhuǎn)換數(shù)據(jù)，在前臺(tái)顯示的時(shí)候，有很長(zhǎng)一段時(shí)間顯示空白頁(yè)面，所以想到寫一個(gè)假的加載動(dòng)畫，下面看下實(shí)現(xiàn)代碼2016-12-12
jquery 設(shè)置元素相對(duì)于另一個(gè)元素的top值(實(shí)例代碼)
在jquery中offset().top是相對(duì)于body來說的，另外在設(shè)置top值的時(shí)候要找到與該元素最近的有相對(duì)值的元素2013-11-11
jquery獲取當(dāng)前點(diǎn)擊對(duì)象的value方法
這篇文章主要介紹了jquery如何獲取當(dāng)前點(diǎn)擊對(duì)象的value,需要的朋友可以參考下2014-02-02
jquery 操作兩個(gè)select實(shí)現(xiàn)值之間的互相傳遞
本篇文章主要是對(duì)jquery操作兩個(gè)select實(shí)現(xiàn)值之間的互相傳遞進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-03-03
jQuery回車實(shí)現(xiàn)登錄簡(jiǎn)單實(shí)現(xiàn)
實(shí)現(xiàn)登錄的方法有很多，這里為大家介紹下實(shí)現(xiàn)回車提交表單，具體如下，感興趣的朋友可以參考下2013-08-08
jquery無法設(shè)置checkbox選中即沒有變成選中狀態(tài)
設(shè)置以后checkbox并沒有變成選中狀態(tài)，用chrome調(diào)試看了一下，checkbox中確實(shí)有checked屬性，針對(duì)這個(gè)問題，大家可以參考下本文2014-03-03
詳解Bootstrap的iCheck插件checkbox和radio
這篇文章主要詳細(xì)介紹了Bootstrap的iCheck插件checkbox和radio的知識(shí)及bootstrap icheck獲取radio的value值的方法，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看下吧2016-08-08
jquery實(shí)現(xiàn)倒計(jì)時(shí)效果
這篇文章主要介紹了jquery實(shí)現(xiàn)倒計(jì)時(shí)效果，根據(jù)設(shè)計(jì)一個(gè)游戲引出的倒計(jì)時(shí)功能，需要的朋友可以參考下2015-12-12
jQuery EasyUI 是一個(gè)基于 jQuery 的框架，集成了各種用戶界面插件，該框架提供了創(chuàng)建網(wǎng)頁(yè)所需的一切，幫助您輕松建立站點(diǎn)。本文給大家介紹JQuery EasyUI的一些常用組件，感興趣的的朋友一起學(xué)習(xí)吧2017-07-07
jQuery常用事件方法mouseenter+mouseleave+hover
這篇文章主要介紹了jQuery常用事件方法mouseenter、mouseleave和hover方法，下文內(nèi)容介紹詳細(xì)，需要的小伙伴可以參考一下2022-03-03