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 EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jQuery操作事件完整实例分析
Jan 10 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
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
PHP 中执行排序与 MySQL 中排序
2009/04/21 PHP
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
python中__call__内置函数用法实例
2015/06/04 Python
Python中文竖排显示的方法
2015/07/28 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
python将txt文件读入为np.array的方法
2018/10/30 Python
django 外键model的互相读取方法
2018/12/15 Python
python创造虚拟环境方法总结
2019/03/04 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
国贸专业的职业规划范文
2014/01/23 职场文书
男方父母婚礼答谢词
2014/01/25 职场文书
规划编制实施方案
2014/03/15 职场文书
幸福家庭标语
2014/06/27 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers
如何利用python实现列表嵌套字典取值
2022/06/10 Python