分享我的jquery实现下拉菜单心的


Posted in Javascript onNovember 29, 2015

摘要:

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>

其中为六层深度的菜单结构,如下图

分享我的jquery实现下拉菜单心的

二、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>
Javascript 相关文章推荐
js 模拟气泡屏保效果代码
Jul 10 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
Apr 23 Javascript
JS的Document属性和方法小结
Sep 17 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
浅析javascript 定时器
Dec 23 Javascript
jQuery图片轮播实现并封装(一)
Dec 03 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
vue生成token并保存到本地存储中
Jul 17 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 #Javascript
整理Javascript基础语法学习笔记
Nov 29 #Javascript
Jquery操作Ajax方法小结
Nov 29 #Javascript
jquery+php实现滚动的数字特效
Nov 29 #Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 #Javascript
Javascript闭包实例详解
Nov 29 #Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 #Javascript
You might like
JAVA/JSP学习系列之二
2006/10/09 PHP
PHP配置心得包含MYSQL5乱码解决
2006/11/20 PHP
一个用php实现的获取URL信息的类
2007/01/02 PHP
Can't create/write to file 'C:\WINDOWS\TEMP\...MYSQL报错解决方法
2011/06/30 PHP
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
探究Vue.js 2.0新增的虚拟DOM
2016/10/20 Javascript
详解jQuery选择器
2016/12/21 Javascript
js实现密码强度检验
2017/01/15 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
浅谈python写入大量文件的问题
2018/11/09 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
如何判断计算机可能已经中马
2013/03/22 面试题
清明节网上祭英烈活动总结
2014/04/30 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
优秀团队申报材料
2014/12/26 职场文书
《叶问2》观后感
2015/06/15 职场文书
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript