当前位置: 编程技术>jquery
jquery实例之div ul li模拟下拉选项(option标签)
来源: 互联网 发布时间:2014-10-08
本文导语: 例子,自己定义一种样式来模拟option标签功能。 代码示例: $( function(){ $("#lang").click(function(){ if("block" == $("#huangbiao").css("display")){ hid...
例子,自己定义一种样式来模拟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.
- dddd
- ssss
技术难点:
当鼠标没有点击空白处时,应该让现实出来的下拉列表隐藏起来,这样就会导致一个问题,当点击下面的li标签的内容时,先触发onblur事件,导致li标签先隐藏,在点击li的内容时实际上是一个空组件,而没有触发“赋值事件”,导致不能能够满足option组件的基本需求。
解决方法:
当触发blur事件时,推迟0.2秒再隐藏起来,实际是触发了两个事件——先执行onblur事件,在执行li组件的赋值事件。