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 相关文章推荐
javascript中call和apply方法浅谈
Sep 27 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
Oct 17 Javascript
javascript实现将文件保存到本地方法汇总
Jul 26 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
每天一篇javascript学习小结(String对象)
Nov 18 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
Jun 17 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
Nov 07 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
Angular4 中常用的指令入门总结
Jun 12 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 Javascript
纯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
最令PHP初学者头痛的十四个问题
2006/07/12 PHP
做一个有下拉功能的留言版
2006/10/09 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
php实现读取内存顺序号
2015/03/29 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
解析JavaScript中的标签语句
2013/06/19 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
2015/08/12 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
python批量下载图片的三种方法
2013/04/22 Python
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
Python爬豆瓣电影实例
2018/02/23 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
介绍一下grep命令的使用
2012/06/28 面试题
护士实习鉴定范文
2013/12/22 职场文书
劳动模范事迹材料
2014/01/19 职场文书
基层党组织公开承诺书
2014/03/28 职场文书
读书活动总结范文
2014/04/26 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技