博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery 弹出层菜单
阅读量:5121 次
发布时间:2019-06-13

本文共 2782 字,大约阅读时间需要 9 分钟。

经典的Jquery弹出层菜单,附完整代码。预览效果效果网址:

jquery添加移除类的两个方法:

addClass() 方法向被选元素添加一个或多个类。
该方法不会移除已存在的 class 属性,仅仅添加一个或多个 class 属性。
提示:如需添加多个类,请使用空格分隔类名。
语法
$(selector).addClass(class)
参数 描述
class 必需。规定一个或多个 class 名称。
使用函数来添加类
使用函数向被选元素添加类。
语法
$(selector).addClass(function(index,oldclass))
removeClass() 方法从被选元素移除一个或多个类。
注释:如果没有规定参数,则该方法将从被选元素中删除所有类。
语法
$(selector).removeClass(class)
参数 描述
class
可选。规定要移除的 class 的名称。
如需移除若干类,请使用空格来分隔类名。
如果不设置该参数,则会移除所有类。
使用函数来移除类
使用函数来删除被选元素中的类。
$(selector).removeClass(function(index,oldclass))
下面是菜单的完整代码:
<!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>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>经典:柯乐义jQuery弹出层菜单</title><base target="_blank" />
<script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery-1.8.3.min.js"></script>
<style type="text/css">
body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd{padding:0;margin:0;}
li{list-style:none;}img{border:none;}em{font-style:normal;}
a{color:#555;text-decoration:none;outline:none;}
a:hover{color:#000;text-decoration:underline;}
body{font-size:12px;font-family:Arial,Verdana, Helvetica, sans-serif;word-break:break-all;word-wrap:break-word;}
.clear{height:0;overflow:hidden;clear:both;}
.keleyi_com{ margin:100px;}
.keleyi_com dl dt{width:70px;position:absolute; z-index:3;padding:0 5px;line-height:20px;}
.www_keleyi_com{border:#ccc 1px solid; border-bottom:none;background:#f1f1f1; margin:-1px 0 0 -1px;}
.keleyi_com dl dd{ width:110px;position:absolute;z-index:2;border:#ccc 1px solid;padding:5px; line-height:20px; background:#f1f1f1; display:none; margin:19px 0 0 -1px;}
.keleyi_com dl dd a{ display:block;border-bottom:#ccc 1px dashed;}
</style>
<script type="text/javascript">
$(document).ready(function () {
var objStr = ".keleyi_com";
$(objStr).each(function (i) {
$(this).mouseover(function () {
$($(objStr + " dd")[i]).show();
$($(objStr + " dt")[i]).addClass("www_keleyi_com");
});
$(this).hover(function () { }, function () {
$($(objStr + " dd")[i]).hide();
$($(objStr + " dt")[i]).removeClass("www_keleyi_com");
});
});
});
</script>
</head>
<body>
<!-- 【经典】柯乐义弹出层菜单 -->
<div style="width:400px;margin-left:auto;margin-right:auto;">
<div class="keleyi_com">
<dl>
<dt><a href="http://www.keleyi.com">柯乐义菜单</a></dt>
<dd>
<a href="http://www.keleyi.com/menu/javascript/">Javascript</a>
<a href="http://www.keleyi.com/menu/jquery/">Jquery</a>
<a href="http://www.keleyi.com/menu/csharp/">C#</a>
<a href="http://www.keleyi.com/menu/net/">.NET</a>
</dd>
</dl>
</div><br /><br />请把光标移到上面菜单上<br /><br />
柯乐义提醒您:更多更新特效,请上www.keleyi.com
</div>
</body>
</html>

本文转载自柯乐义

转载于:https://www.cnblogs.com/jihua/archive/2013/01/30/2883377.html

你可能感兴趣的文章
类库与框架,强类型与弱类型的闲聊
查看>>
php match_model的简单使用
查看>>
SIP服务器性能测试工具SIPp使用指导(转)
查看>>
回调没用,加上iframe提交表单
查看>>
LeetCode(3) || Median of Two Sorted Arrays
查看>>
大话文本检测经典模型:EAST
查看>>
待整理
查看>>
一次动态sql查询订单数据的设计
查看>>
C# 类(10) 抽象类.
查看>>
Vue_(组件通讯)子组件向父组件传值
查看>>
jvm参数
查看>>
我对前端MVC的理解
查看>>
Silverlight实用窍门系列:19.Silverlight调用webservice上传多个文件【附带源码实例】...
查看>>
2016.3.31考试心得
查看>>
mmap和MappedByteBuffer
查看>>
[BZOJ 3489] A simple rmq problem 【可持久化树套树】
查看>>
STM32单片机使用注意事项
查看>>
swing入门教程
查看>>
好莱坞十大导演排名及其代表作,你看过多少?
查看>>
Loj #139
查看>>