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 相关文章推荐
window.open()弹出居中的窗口
Feb 01 Javascript
javascript脚本调试方法小结
Nov 24 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
jquery.tmpl JQuery模板插件
Oct 10 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
SWFUpload多文件上传及文件个数限制的方法
May 31 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 Javascript
Angular2之二级路由详解
Aug 31 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
微信小程序中为什么使用var that=this
Aug 27 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 Javascript
Vue中点击active并第一个默认选中功能的实现
Feb 24 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目录、文件操作
2010/11/01 PHP
php cookies中删除的一般赋值方法
2011/05/07 PHP
解析php中const与define的应用区别
2013/06/18 PHP
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
php编写的一个E-mail验证类
2015/03/25 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
form中限制文本字节数js代码
2007/06/10 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
2018/01/31 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
利用Python实现Windows定时关机功能
2017/03/21 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
深入理解HTML的FormData对象
2016/05/17 HTML / CSS
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
德国圣伯纳德草药屋:Kräuterhaus Sanct Bernhard(有中文站)
2018/08/05 全球购物
酒后驾驶检讨书
2014/01/27 职场文书
房屋公证委托书
2014/04/03 职场文书
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
活动宣传策划方案
2014/05/23 职场文书
中考标语大全
2014/06/05 职场文书
社区服务活动感想
2015/08/11 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python