经典的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>本文转载自柯乐义