jQuery实现下拉菜单的实例代码


Posted in jQuery onJune 19, 2017

基本效果是这样的~~

jQuery实现下拉菜单的实例代码

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      list-style: none;
    }
    .wrap {
      width: 330px;
      height: 30px;
      margin: 100px auto 0;
      padding-left: 10px;
      background-color: skyblue;
    }
    .wrap li {
      background-color: skyblue;
    }
    .wrap > ul > li {
      float: left;
      margin-right: 10px;
      position: relative;
    }
    .wrap a {
      display: block;
      height: 30px;
      width: 100px;
      text-decoration: none;
      color: #000;
      line-height: 30px;
      text-align: center;
    }
    .wrap li ul {
      position: absolute;
      top: 30px;
      display: none;
    }
  </style>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
  <script>
    $(function () {
      //获取所有li,添加移入事件
      $(".wrap>ul>li").mouseenter(function () {
        //设置内部的子元素ul slideDown
        $(this).children("ul").stop().slideDown(600);
      });
      //移出li时,让内部子元素slideUp
      $(".wrap>ul>li").mouseleave(function () {
        $(this).children("ul").stop().slideUp(600);
      });
      //如果当前运动没有完毕,又添加了新的动画,这时新的动画需要等待当前动画执行完毕才会开始
      //如果持续添加。一定会造成动画的积累,这种情况我们称为动画队列
    });
  </script>
</head>
<body>
<div class="wrap">
  <ul>
    <li>
      <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >一级菜单1</a>
      <ul class="ul">
        <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单11</a></li>
        <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单12</a></li>
        <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单13</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >一级菜单2</a>
      <ul>
        <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单21</a></li>
        <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单22</a></li>
        <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单23</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >一级菜单3</a>
      <ul>
        <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单31</a></li>
        <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单32</a></li>
        <li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二级菜单33</a></li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>

以上所述是小编给大家介绍的jQuery实现下拉菜单的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
jquery DataTable实现前后台动态分页
Jun 17 #jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 #jQuery
jQuery 控制文本框自动缩小字体填充
Jun 16 #jQuery
jQuery序列化后的表单值转换成Json
Jun 16 #jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 #jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 #jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 #jQuery
You might like
PHP学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
jQuery Selector选择器小结
2010/05/06 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
javascript中的return和闭包函数浅析
2014/06/06 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
JS跨域问题详解
2014/11/25 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
vue.js select下拉框绑定和取值方法
2018/03/03 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
kaggle+mnist实现手写字体识别
2018/07/26 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
Python编写单元测试代码实例
2020/09/10 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
如何利用find命令查找文件
2015/02/07 面试题
法学自荐信
2014/06/20 职场文书
化工实习心得体会
2014/09/09 职场文书
承诺保证书格式
2015/02/28 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python