分享我的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 相关文章推荐
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
Jan 15 Javascript
字符串的replace方法应用浅析
Dec 06 Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
vue指令只能输入正数并且只能输入一个小数点的方法
Jun 08 Javascript
微信小程序自定义波浪组件使用方法详解
Sep 21 Javascript
用JS实现选项卡
Mar 23 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 Javascript
vue实现按钮切换图片
Jan 20 Vue.js
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
在php中使用sockets:从新闻组中获取文章
2006/10/09 PHP
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
php打开文件fopen函数的使用说明
2013/07/05 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
介绍Python的Django框架中的QuerySets
2015/04/20 Python
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
Python 递归函数详解及实例
2016/12/27 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
解决python 文本过滤和清理问题
2019/08/28 Python
pygame实现成语填空游戏
2019/10/29 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
优秀三好学生事迹材料
2014/08/31 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
煤矿安全保证书
2015/02/27 职场文书
2015年消防工作总结
2015/04/24 职场文书
网络妈妈观后感
2015/06/08 职场文书
小学校园广播稿
2015/08/18 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书