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 EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
一个可拖拽列宽表格实例演示
Nov 26 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
Oct 23 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 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
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
2008/11/24 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
jQuery隔行变色与普通JS写法的对比
2013/04/21 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
[03:48]大碗DOTA
2019/07/25 DOTA
python实现跨文件全局变量的方法
2014/07/07 Python
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
Python3多线程基础知识点
2019/02/19 Python
Python Django 命名空间模式的实现
2019/08/09 Python
Python 如何提高元组的可读性
2019/08/26 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
详解python中各种文件打开模式
2020/01/19 Python
如何用Django处理gzip数据流
2021/01/29 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
会计员岗位职责
2014/03/15 职场文书
内勤岗位职责
2015/02/10 职场文书
民事辩护词范文
2015/05/21 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书