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的Cookies
Jan 16 Javascript
html 锁定页面(js遮罩层弹出div效果)
Oct 27 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
Mar 04 Javascript
Jquery日历插件制作简单日历
Oct 28 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 Javascript
JS的函数调用栈stack size的计算方法
Jun 24 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 Javascript
在HTML中使用JavaScript的两种方法
Dec 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 项目的方法
2007/01/02 PHP
php过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
JS 控制CSS样式表
2009/08/20 Javascript
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
js弹出的对话窗口永远保持居中显示
2012/12/15 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
Jquery 例外被抛出且未被接住原因介绍
2013/09/04 Javascript
js this函数调用无需再次抓获id,name或标签名
2014/03/03 Javascript
JavaScript学习笔记之JS事件对象
2015/01/22 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
仿京东快报向上滚动的实例
2017/12/13 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
python通过shutil实现快速文件复制的方法
2015/03/14 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
使用tensorflow DataSet实现高效加载变长文本输入
2020/01/20 Python
python高级特性简介
2020/08/13 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
汽车专业人才自我鉴定范文
2013/12/29 职场文书
大学生关于奋斗的演讲稿
2014/01/09 职场文书
九一八事变演讲稿
2014/09/05 职场文书
餐厅服务员岗位职责
2015/02/09 职场文书
食品安全主题班会
2015/08/13 职场文书
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL