jQuery实现的导航下拉菜单效果


Posted in Javascript onJuly 04, 2016

本文实例讲述了jQuery实现的导航下拉菜单效果。分享给大家供大家参考,具体如下:

1.效果如图所示:

jQuery实现的导航下拉菜单效果

2.html代码:

<div id="navigation">
 <ul>
   <li><a href="#">首 页</a></li>
   <li><a href="#">衬 衫</a>
    <ul>
      <li><a href="#">短袖衬衫</a></li>
      <li><a href="#">长袖衬衫</a></li>
      <li><a href="#">无袖衬衫</a></li>
    </ul>
  </li>
  <li><a href="#">卫 衣</a>
    <ul>
      <li><a href="#">开襟卫衣</a></li>
      <li><a href="#">套头卫衣</a></li>
    </ul>
   </li>
  <li><a href="#">裤 子</a>
    <ul>
      <li><a href="#">休闲裤</a></li>
      <li><a href="#">卡其裤</a></li>
      <li><a href="#">牛仔裤</a></li>
      <li><a href="#">短裤</a></li>
    </ul>
   </li>
   <li><a href="#">联系我们</a></li>
 </ul>
</div>

3.jQuery代码:

//导航效果(兼容IE6)
/*
1.使用$("#navigation ul li:has(ul)")函数来选择含有<ul>元素的<li>元素,然后为它们添加hover事件,
2.在hover事件的第一个函数内,使用$(this).children("ul")找到<li>元素内部的<ul>元素,然后用stop(true,true)语句使导航向下扩展
3.在hover事件的第二个函数内,用stop(true,true).slideUp("fast")语句使导航向上隐藏
4.在两个动画效果之前都添加了stop(true,true)方法,这样做的好处是能把为执行完的动画队列清空,并且将正在执行的动画跳转到末状态
*/
$(function(){
  $("#navigation ul li:has(ul)").hover(function(){
   $(this).children("ul").stop(true,true).slideDown(400);
  },function(){
   $(this).children("ul").stop(true,true).slideUp("fast");
  });
})

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery入门—编写一个导航条(可伸缩)
Jan 07 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
Jul 31 Javascript
简单的代码实现jquery定时器
Nov 17 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
Jan 09 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
Mar 13 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
详解webpack 入门与解析
Apr 09 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
Oct 10 Javascript
Vue路由模块化配置的完整步骤
Aug 14 Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 Javascript
javascript实现京东登录显示隐藏密码
Aug 02 Javascript
表单中单选框添加选项和移除选项
Jul 04 #Javascript
jQuery实现简单倒计时功能的方法
Jul 04 #Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 #Javascript
JavaScript 节流函数 Throttle 详解
Jul 04 #Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 #Javascript
实用jquery操作表单元素的简单代码
Jul 04 #Javascript
jQuery实现左侧导航模块的显示与隐藏效果
Jul 04 #Javascript
You might like
PHP4实际应用经验篇(5)
2006/10/09 PHP
PHP XML备份Mysql数据库
2009/05/27 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
python各种语言间时间的转化实现代码
2016/03/23 Python
python实现抖音视频批量下载
2018/06/20 Python
python 同时运行多个程序的实例
2019/01/07 Python
python列表使用实现名字管理系统
2019/01/30 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
Python 3 判断2个字典相同
2019/08/06 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
Python魔术方法专题
2020/06/19 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
一些关于python 装饰器的个人理解
2020/08/31 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
What is EJB
2016/07/22 面试题
2014年预备党员学习两会心得体会
2014/03/17 职场文书
职业规划实施方案
2014/06/10 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
闪闪的红星观后感
2015/06/08 职场文书
爱国影片观后感
2015/06/18 职场文书
聊一聊python常用的编程模块
2021/05/14 Python
SpringRetry重试框架的具体使用
2021/07/25 Java/Android