javascript - 焦点下拉菜单未将自身定位在 div 之后

Question

我有一个下拉菜单 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 在移除焦点时消失。

总结一下，我有两个问题:

1. 关于下拉框的定位
2. 打开和关闭搜索框的下拉菜单。

谢谢!

Answer 1

您可以使用 position:absolute; 作为下拉菜单。并且还在文本字段上使用 Jquery 事件 blur 来隐藏它

JS FIDDLE DEMO

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;
}

下拉菜单的样式由您掌控:)