jquery ul html,jquery实例之div ul li模拟下拉选项(option标签)

例子，自己定义一种样式来模拟option标签功能。

复制代码 代码示例:

$(

function(){

$("#lang").click(function(){

if("block" == $("#huangbiao").css("display")){

hideLi();

}else{

showLi();

}

});

$("li").each(function(i,v){

$(this).click(function(){

$("#lang").val($(this).html());

hideLi();

});

});

$("#lang").blur(function(){

setTimeout(hideLi,200);

});

}

);

function showLi(){

$("#huangbiao").show();

}

function hideLi(){

$("#huangbiao").hide();

}

jquery实现div ul li模拟下拉选项功能_www.jbxue.com

• dddd
• ssss

技术难点：

当鼠标没有点击空白处时，应该让现实出来的下拉列表隐藏起来，这样就会导致一个问题，当点击下面的li标签的内容时，先触发onblur事件，导致li标签先隐藏，在点击li的内容时实际上是一个空组件，而没有触发“赋值事件”，导致不能能够满足option组件的基本需求。

解决方法：

当触发blur事件时，推迟0.2秒再隐藏起来，实际是触发了两个事件——先执行onblur事件，在执行li组件的赋值事件。