分享我的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 相关文章推荐
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
Jun 08 Javascript
AngularJS 指令详细介绍
Jul 27 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
Vue分页组件实例代码
Apr 17 Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
前端把html表格生成为excel表格的实例
Sep 19 Javascript
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
javascript实现切割轮播效果
Nov 28 Javascript
JavaScript自定义超时API代码实例
Apr 30 Javascript
vue 全局封装loading加载教程(全局监听)
Nov 05 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 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
sony ICF-2010 拆解与改装
2021/03/02 无线电
咖啡的种类和口感
2021/03/03 新手入门
PHP面向对象编程快速入门
2006/12/14 PHP
最令PHP初学者们头痛的十四个问题
2007/01/15 PHP
php按单词截取字符串的方法
2015/04/07 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
JavaScript 面向对象之命名空间
2010/05/04 Javascript
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
Vue中使用Sortable的示例代码
2018/04/07 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
python3中dict(字典)的使用方法示例
2017/03/22 Python
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
python tkinter控件布局项目实例
2019/11/04 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
通过自学python能找到工作吗
2020/06/21 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
python 递归相关知识总结
2021/03/03 Python
SEPHORA新西兰官方网站:购买化妆品和护肤品
2016/12/02 全球购物
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
年度考核自我鉴定
2014/03/19 职场文书
商场促销活动策划方案
2014/08/18 职场文书
只用Python就可以制作的简单词云
2021/06/07 Python