jQuery简单实现两级下拉菜单效果代码


Posted in Javascript onSeptember 15, 2015

本文实例讲述了jQuery简单实现两级下拉菜单效果代码。分享给大家供大家参考。具体如下:

这是一款两级下拉菜单,jquery插件版,在IE6/IE7/IE8下运行良好,在本示例中,菜单仅显示了四组,不过原理是一样的,菜单较长的话直接复制其中一组就行了,直到满足你的应用。

运行效果截图如下:

jQuery简单实现两级下拉菜单效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>两级下拉菜单</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<style>
*{ margin:0px; padding:0px; list-style:none; }
body{ font-size:12px; }
.nav{ float:left; clear:both; margin:100px; display:inline; }
.nav li{ float:left; position:relative; }
.nav li a{ display:block; width:60px; padding:8px 0px 6px; text-align:center; color:#000; background:#ccc; text-decoration:none; }
.nav li a:hover { background:#666; color:#fff; }
.nav li ul{ position:absolute; display:none; }
.nav li ul li { float:none; }
.nav li ul li a{ background:#eee; }
</style>
</head>
<body>
<ul id="mainNav" class="nav" >
<li><a href="javascript:void(0);">首 页</a></li>
<li><a href="javascript:void(0);">导航菜单</a>
<ul>
<li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">采购</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" >企业采购</a>
<ul>
<li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">企业评测</a></li>
<li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">企业报价</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">行情报价</a>
<ul>
<li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">导航1</a></li>
<li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">导航2</a></li>
<li><a href="javascript:void(0);" onclick="javascript:alert($(this).html());">导航3</a></li>
</ul>
</li>
</ul>
<script language="JavaScript" type="text/javascript">
<!--
$(document).ready(function(){
 var li = $("#mainNav > li"); //找到#mainNav中子元素li;
 var ul;
 li.each(function(i){ //循环每一个LI
  li.eq(i).hover(
   function(){
    $(this).find("ul").show(); //找到li里面的ul元素设置为显示
   },
   function(){
    $(this).find("ul").hide(); 
   }
  )
 })
})
//-->
</script>
</body>
</html>

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

Javascript 相关文章推荐
JavaScript中SQL语句的应用实现
May 04 Javascript
基于jquery可配置循环左右滚动例子
Sep 09 Javascript
javascript返回顶部效果(自写代码)
Jan 06 Javascript
JS实现简单的Canvas画图实例
Jul 04 Javascript
jquery如何获取复选框的值
Dec 12 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
JS 日期与时间戮相互转化的简单实例
Jun 22 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
Sep 04 Javascript
ES6学习教程之Map的常用方法总结
Aug 03 Javascript
解析vue路由异步组件和懒加载案例
Jun 08 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 #Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 #Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 #Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
Sep 15 #Javascript
JS实现完全语义化的网页选项卡效果代码
Sep 15 #Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 #Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 #Javascript
You might like
对盗链说再见...
2006/10/09 PHP
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
基于PHP实现发微博动态代码实例
2020/12/11 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
2016/05/07 Javascript
Bootstrap的基本应用要点浅析
2016/12/19 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
微信小程序tab左右滑动切换功能的实现代码
2021/02/08 Javascript
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
python实现定时播放mp3
2015/03/29 Python
python关闭windows进程的方法
2015/04/18 Python
深入理解python中的浅拷贝和深拷贝
2016/05/30 Python
python入门教程之识别验证码
2017/03/04 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
详解python运行三种方式
2019/05/13 Python
Python+OpenCV图像处理——实现直线检测
2020/10/23 Python
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
开业庆典策划方案
2014/02/18 职场文书
学习十八大报告感言
2014/02/28 职场文书
材料工程专业毕业生求职信
2014/03/04 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
关爱老人标语
2014/06/21 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
针对吵架老公保证书
2015/05/08 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS