我有一个下拉菜单 div
专注于 <input type='text'>
方框如下
http://jsfiddle.net/Newtt/7ffdF/
我需要下拉框出现在 container-box
上方搜索框后面的div。目前它正在将 div 向下推。有没有办法让这个文本框表现得像 select
无需使用 select
标签标签。
下拉 div 的 CSS 是
display:none;z-index:200;
在搜索框的焦点上,div 使用:
$('#text-box').focus(function(){
$('.dropdown').show();
});
我还需要 div 在移除焦点时消失。
总结一下,我有两个问题:
- 关于下拉框的定位
- 打开和关闭搜索框的下拉菜单。
谢谢!
最佳答案
您可以使用 position:absolute;
作为下拉菜单。并且还在文本字段上使用 Jquery 事件 blur
来隐藏它
JS
$(document).ready(function(){
$('#text-box').focus(function(){
$('.dropdown').show();
});
$('#text-box').blur(function(){
$('.dropdown').hide();
});
});
CSS
.container-box {
height:400px;
width:400px;
background: #ccc;
}
.dropdown{
display:none;
position:absolute;
z-index:200;
}
.dropdown ul {
padding :0;
background : #ddffaa;
}
下拉菜单的样式由您掌控:)
关于javascript - 焦点下拉菜单未将自身定位在 div 之后,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21107205/