[AppleScript] 纯文本查看 复制代码 /*
首先
这里是这么一个交互,鼠标滑过myid时,list菜单显示,然后再当鼠标滑过list里面的li时
list-1菜单显示;
其次
这里有两个疑问
1、我写了四个,鼠标从不同的地方离开后所有菜单消失;能否简化?(可以通过额外增加标签,或者类、、//但是不建议这样写
分开写,有助于,代码的被阅读;)
2、不管在显示还是隐藏时,因为是两个菜单,所以我都是写了两句,这里感觉是重复的。加入是个三级菜单呢,四级菜单呢?
*/
$(document).ready(function(){
var timeoutId;
function init(){
//当鼠标滑过myid时list显示
$('#myid').hover(function(){
clearTimeout(timeoutId);
$('.list').slideDown();//当鼠标进入myid时,list下拉,
$('.list-1').hide();//这句话一定要有,负责当,鼠标从list中进入myid是,list-1不会消失,这样不符合设计
},function(){
//这里就是mouseout,这段代码是,当用户鼠标离开myid时,所有菜单消失
$('#myid').mouseout(function(){
clearTimeout(timeoutId);//这句话是为了当鼠标离开myid进入list时,list不消失给鼠标一个进入list的时间
timeoutId = setTimeout(function(){
$('.list').hide();
$('.list-1').hide();//这里有疑问?因为这里list-1是list的下一级,假如list-1还有下一级list-1-1,请问该怎么处理
},200);
});
});
//list下拉以后,鼠标滑过list里面的li时的交互
$('.list li').hover(function(){
clearTimeout(timeoutId);
$('.list-1').show();//先让list-1显示出来
$('.list-1>div').hide().eq($(this).attr('_index')).show();//根据鼠标画到的list-1里面的li返回z-index值,显示对应的div
},function(){
});
//下面注释掉的这段代码,不是有问题,而是放在第20行哪里,条理上更清晰,
//当鼠标离开myid时,list和list-1同时隐藏
// $('#myid').mouseout(function(){
// timeoutId = setTimeout(function(){
// $('.list').hide();
// $('.list-1').hide();//这里有疑问?因为这里list-1是list的下一级,假如list-1还有下一级list-1-1,请问该怎么处理
// },200);
// });
//当鼠标从list-1离开时list和list-1隐藏
$('.list-1').hover(function(){//hover跟两个function,第一个表示mouseover,第二个表示mouseout
clearTimeout(timeoutId);
},function(){
timeoutId = setTimeout(function(){
$('.list').hide();//当鼠标移开时隐藏
$('.list-1').hide();
},200);
});
//当鼠标从list离开时list和list-1隐藏
$('.list').hover(function(){//hover跟两个function,第一个表示mouseover,第二个表示mouseout
clearTimeout(timeoutId);
},function(){
timeoutId = setTimeout(function(){
$('.list').hide();//当鼠标移开时隐藏
$('.list-1').hide();
},200);
});
}
init();
});
|