jQuery实现简单二级下拉菜单


Posted in Javascript onApril 12, 2015

html代码

<div class="UpLayer">
<dl>
<dt>
<a href="javascript:void(0)">三水点靠木</a></dt>
<dd>
<a href="http://www.demo.com/js/">特效</a> <a href="http://www.demo.com/Tutorials/">教程</a> <a href="http://www.demo.com/zy/">资源</a> <a href="http://www.demo.com/mb/">模板</a> <a href="http://www.demo.com/news/">资讯</a></dd>
</dl>
</div>

js代码

<script type="text/javascript"> 
// 【经典】弹出层菜单 
$(document).ready(function(){ 
  var objStr = ".UpLayer"; 
  $(objStr).each(function(i){ 
    $(this).click(function(){ 
      $($(objStr+" dd")[i]).show(); 
      $($(objStr+" dt")[i]).addClass("UpLayer02"); 
    }); 
    $(this).hover(function(){},function(){ 
      $($(objStr+" dd")[i]).hide(); 
      $($(objStr+" dt")[i]).removeClass("UpLayer02"); 
    });  
  }); 
}); 
</script>

css代码

body,h1,h2,h3,h4,h5,h6,p,ol,ul,li,dl,dt,dd{padding:0;margin:0;} 
li{list-style:none;} 
img{border:none;} 
u{text-decoration:none;} 
em{font-style:normal;} 
a{color:#424242;text-decoration:none;outline:none;blr:expression(this.onFocus=this.blur());} 
body{font-size:12px;font-family: Arial,Verdana, Helvetica, sans-serif; word-break:break-all;} 
.box{margin:0 auto;text-align:left;width:920px;} 
.clear{clear:both;} 
/* 【经典】弹出层菜单 */ 
.UpLayer{ margin:100px;} 
.UpLayer dl dt{width:50px;position:absolute; z-index:3;padding:0 5px;line-height:20px;} 
.UpLayer02{border:#ccc 1px solid; border-bottom:none;background:#f1f1f1; margin:-1px 0 0 -1px;} 
.UpLayer dl dd{ width:80px;position:absolute;z-index:2;border:#ccc 1px solid;padding:5px; line-height:20px; background:#f1f1f1; display:none; margin:19px 0 0 -1px;} 
.UpLayer dl dd a{ display:block;border-bottom:#ccc 1px dashed;}

最好不要忘记插入jQuery js文件,最好下载最新的。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JS代码优化技巧之通俗版(减少js体积)
Dec 23 Javascript
JS获取时间的方法
Jan 21 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
js实现文本上下来回滚动
Feb 03 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
May 03 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
Three.JS实现三维场景
Dec 30 Javascript
vue 项目build错误异常的解决方法
Apr 22 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 Javascript
JS字符串与二进制的相互转化实例代码详解
Jun 28 Javascript
一篇文章学会Vue中间件管道
Jun 20 Vue.js
纯JS实现旋转图片3D展示效果
Apr 12 #Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 #Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 #Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 #Javascript
jQuery插件StickUp实现网页导航置顶
Apr 12 #Javascript
JavaScript 面向对象与原型
Apr 10 #Javascript
javascript基本包装类型介绍
Apr 10 #Javascript
You might like
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
PHP.ini中配置屏蔽错误信息显示和保存错误日志的例子
2014/05/12 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
2013/12/16 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
JS判断日期格式是否合法的简单实例
2016/07/11 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
Python二分法搜索算法实例分析
2015/05/11 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
python实现串口通信的示例代码
2020/02/10 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
学校安全工作制度
2014/01/19 职场文书
社区党总支书记先进事迹材料
2014/01/24 职场文书
顶撞领导检讨书
2014/01/29 职场文书
高中教师评语大全
2014/04/25 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript
python实现会员管理系统
2022/03/18 Python
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL