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 相关文章推荐
picChange 图片切换特效的函数代码
May 06 Javascript
JavaScript中的property和attribute介绍
Dec 26 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
JavaScript模拟数组合并concat
Mar 06 Javascript
bootstrap suggest下拉框使用详解
Apr 10 Javascript
jQuery表单设置值的方法
Jun 30 jQuery
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 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
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
供参考的 php 学习提高路线分享
2011/10/23 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
Javascript:为input设置readOnly属性(示例讲解)
2013/12/25 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
Python之使用adb shell命令启动应用的方法详解
2019/01/07 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
学习Python列表的基础知识汇总
2020/03/10 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
美国职棒大联盟官方网上商店:MLBShop.com
2017/11/12 全球购物
Paradox London官方网站:英国新娘鞋婚礼鞋品牌
2019/08/29 全球购物
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
英语简历自我评价
2014/01/26 职场文书
高中打架检讨书
2014/02/13 职场文书
电子商务求职信
2014/06/15 职场文书
党课培训心得体会
2014/09/02 职场文书
宣传委员竞选稿
2015/11/19 职场文书
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB