html怎么隐藏上拉菜单,各种显示隐藏上拉菜单效果

这篇博客介绍了一个使用jQuery编写的函数,用于实现各种显示和隐藏下拉菜单的效果。通过绑定mouseenter和mouseleave事件,实现了鼠标悬停时菜单的淡入淡出动画。示例代码展示了如何为不同的选择器应用此功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

各种显示隐藏下拉菜单效果

使用jQuery了

//各种显示隐藏下拉菜单效果

function showhide(selector1, selector2, type){

var timer = {};

var key = "___showhide_uuid"

//取得全局唯一标志符

var UUID = function(){

if(!window[key]) window[key] = 1;

return window[key]++;

}

//先检查目标有没有uuid

var uuid = $(selector1).eq(0).attr(key);

if(!uuid){

uuid = UUID();

}

//将uuid添加到dom上

$(selector1).attr(key, uuid);

$(selector2).attr(key, uuid);

//确定动作

type = type || "mouseenter";

//绑定动作

var call = function(_this, callback){

var _uuid = $(_this).attr(key);

if(timer[_uuid]) clearInterval(timer[_uuid]);

timer[_uuid] = setTimeout(function(){callback.call();},200);

}

$(selector1)[type](function(){

call(this, function(){$(selector2).fadeIn(100);});

}).mouseleave(function(){

call(this, function(){$(selector2).fadeOut(200);});

});

$(selector2).mouseenter(function(){

call(this, function(){});

}).mouseleave(function(){

call(this, function(){$(selector2).fadeOut(200);});

});

}

/*

使用方法

showhide(".J_C_Game",".J_C_Game_T","mouseenter");

showhide(".J_C_Game",".J_C_Game_T","click");

...

*/

1 楼

TXterran

2012-10-11

你想说明什么?

2 楼

1927105

2012-10-11

写文档的能力有待提高啊

3 楼

jacking124

2012-10-12

看着不是很明白的

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值