分享我的jquery实现下拉菜单心的
摘要：
jquery库给我们带来了很多方便的地方，使用jquery实现一个简单的下拉菜单已经是很简单了，但也有不同的实现方法。今天自己使用jquery写了一个下拉菜单，参考了Xiaofeng Wang的SexyDropDownMenu2010，其中还是有一些东西感觉值得记录一下。
实现：
首先上他的代码（把全部的代码贴上来太长了，就捡部分吧），
一、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>
其中为六层深度的菜单结构，如下图
二、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处理函数，感觉是比较巧妙的地方
$(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\");
});
})；
第一部分：
添加了下了菜单的一个触发按钮
第二部分：
绑定了一个click事件的处理函数
触发按钮被click后给下拉菜单最外层的li绑定hover处理函数，感觉是比较巧妙的地方。
给最外层的li绑定hover函数，这里处理函数写的是当鼠标悬停在li上时不做任何处理（第一函数为空），当鼠标离开时li收起。
这样一来，后面展开ul的菜单都是最外层的li里面，这样菜单就不会自动收起了，也就是等于是鼠标离开了整个菜单，li会自动收起。
第三部分：
给菜单下中嵌套的ul的hover事件绑定函数，用于展开和收起下一级菜单
$(this).find(\"ul.submenu11:first\")也是比较巧妙的通过find获得当前匹配元素集合中每个元素的后代，并通过“ul.submenu11:first”筛选活动下一代元素给以展开。
同时也给下一级菜单绑定了收起的处理函数，与触发菜单中click给最外层li绑定的收起函数一同作用，是想菜单的自动收起功能。
总结：
其中展现了jquery筛选器的强大和灵活，也体现jquery优美的链式语法。
下面给大家分享一段纯jQuery水平下拉菜单实现
<!DOCTYPE html>
<html>
<head>
<title>jQuery水平下拉菜单实现</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\">菜单项</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\">菜单项</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\">菜单项</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\">菜单项</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>
本文地址：https://www.stayed.cn/item/9333
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我
我的博客
人生若只如初见，何事秋风悲画扇。
我的标签
随笔档案
- 2024-02(2)
- 2023-06(1)
- 2023-05(1)
- 2023-04(14)
- 2023-03(3)
- 2023-01(6)
- 2022-12(5)
- 2022-11(5)
- 2022-07(2)
- 2022-06(4)
- 2022-05(3)
- 2022-03(1)
- 2021-12(6)
- 2021-11(1)
- 2021-10(3)
- 2021-09(5)
- 2021-07(5)
- 2021-02(2)
- 2021-01(7)
- 2020-12(18)
- 2020-11(14)
- 2020-10(12)
- 2020-09(10)
- 2020-08(22)
- 2020-07(2)
- 2020-06(1)
- 2020-04(5)
- 2020-03(9)
- 2020-02(7)
- 2020-01(9)
- 2019-12(8)
- 2019-11(10)
- 2019-10(11)
- 2019-09(17)
- 2019-08(16)
- 2019-07(6)
- 2019-06(3)
- 2019-04(1)
- 2019-03(8)
- 2019-02(5)
- 2019-01(1)
- 2018-11(2)
- 2018-10(3)
- 2018-09(1)
- 2018-08(3)
- 2018-07(3)
- 2018-06(7)
- 2018-04(4)
- 2018-03(5)
- 2018-02(4)
- 2018-01(22)
- 2017-12(3)
- 2017-11(5)
- 2017-10(15)
- 2017-09(26)
- 2017-08(1)
- 2017-07(3)