jQuery 实现自动填充邮箱功能（带下拉提示）(3)

if(event.keyCode == 40){ //当键盘按下↓时,如果已经有li处于被选中的状态,则去掉状态,并把样式赋给下一条(可见的)li if ($("ul.autoul li").is(".lihover")) { //如果还存在下一条(可见的)li的话 if ($("ul.autoul li.lihover").nextAll().is("li:visible")) { if ($("ul.autoul li.lihover").nextAll().hasClass("showli")) { $("ul.autoul li.lihover").removeClass("lihover") .nextAll(".showli:eq(0)").addClass("lihover"); } else { $("ul.autoul li.lihover").removeClass("lihover").removeClass("showli") .next("li:visible").addClass("lihover"); $("ul.autoul").children().show(); } } else { $("ul.autoul li.lihover").removeClass("lihover"); $("ul.autoul li:visible:eq(0)").addClass("lihover"); } } }

⑥按键为方向键 ↑ (38)

if(event.keyCode == 38){ //当键盘按下↓时,如果已经有li处于被选中的状态,则去掉状态,并把样式赋给下一条(可见的)li if($("ul.autoul li").is(".lihover")){ //如果还存在上一条(可见的)li的话 if($("ul.autoul li.lihover").prevAll().is("li:visible")){ if($("ul.autoul li.lihover").prevAll().hasClass("showli")){ $("ul.autoul li.lihover").removeClass("lihover") .prevAll(".showli:eq(0)").addClass("lihover"); }else{ $("ul.autoul li.lihover").removeClass("lihover").removeClass("showli") .prev("li:visible").addClass("lihover"); $("ul.autoul").children().show(); } }else{ $("ul.autoul li.lihover").removeClass("lihover"); $("ul.autoul li:visible:eq("+($("ul.autoul li:visible").length-1)+")").addClass("lihover"); } }else{ //当键盘按下↓时,如果之前没有一条li被选中的话,则第一条(可见的)li被选中 $("ul.autoul li:visible:eq("+($("ul.autoul li:visible").length-1)+")").addClass("lihover"); } }

至此keydown事件结束。

⑦当鼠标点击下拉菜单的具体一条内容时

$(".autoli").click(function(){ $("#uemail").val($(this).children(".ex").text()+$(this).children(".at").text()+$(this).children(".step").text()); $(".autoul").hide(); }); //鼠标点击下拉菜单具体内容事件结束

⑧当鼠标点击document时,下拉隐藏

$("body").click(function(){ $(".autoul").hide(); }); //鼠标点击document事件结束

⑨鼠标划过li时

$("ul.autoul li").hover(function(){ if($("ul.autoul li").hasClass("lihover")){ $("ul.autoul li").removeClass("lihover"); } $(this).addClass("lihover"); });

至此，功能完成。

您可能感兴趣的文章: