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 相关文章推荐
jquery select选中的一个小问题
Oct 11 Javascript
Javascript 中 null、NaN和undefined的区别总结
Apr 10 Javascript
js判断是否按下了Shift键的方法
Jan 27 Javascript
详解JavaScript中的every()方法
Jun 08 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 Javascript
JSON简介以及用法汇总
Feb 21 Javascript
深入理解Node.js 事件循环和回调函数
Nov 02 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
Aug 07 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
php源码加密 仿微盾PHP加密专家(PHPCodeLock)
2010/05/06 PHP
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
ES6的Fetch异步请求的实现方法
2018/12/07 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
python 回调函数和回调方法的实现分析
2016/03/23 Python
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
python数字类型math库原理解析
2020/03/02 Python
Python wordcloud库安装方法总结
2020/12/31 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
手把手教你用Django执行原生SQL的方法
2021/02/18 Python
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
Java里面如何创建一个内部类的实例
2015/01/19 面试题
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
音乐教师求职信范文
2015/03/20 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
2016公司年会通知范文
2015/04/25 职场文书
中学校园广播稿
2015/08/18 职场文书
导游词之千岛湖
2019/09/23 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python