Question

我在div框的焦点上下拉<input type='text'>，如下所示

我需要下拉框显示在搜索框后面的container-box div上方。目前它正在向下推动div。有没有办法让这个文本框的行为像select标签，而不必使用select标签。

我的下拉div的CSS是

display:none;z-index:200;

在搜索框的焦点上，div显示为：

$('#text-box').focus(function(){
    $('.dropdown').show();
});

我还需要div在消除焦点时消失。

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

关于投递箱的位置
切换搜索框的下拉焦点和关闭焦点。

谢谢！

Answer 1

您可以使用position: absolute;来停止下拉文档流，因此不会中断其他元素。

如果没有焦点，您还可以使用.blur()来做什么。

http://jsfiddle.net/7ffdF/12/

CSS：

.dropdown {
    display: none;
    z-index: 200;
    position: absolute;
    background-color: #eee;
    width: 400px;
}

和jQuery：

$('#text-box').blur(function() {
    $('.dropdown').hide();
});

Answer 2

将div位置设置为绝对值....

div.dropdown{
    width:170px;
    border:1px solid #ccc;
    position:absolute;
    background-color:#fff;
}

我在JS Fiddler

上为您设置了一个很好的例子

Answer 3

您可以使用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;
}

下拉列表的样式在您手中：）

焦点下拉不会将自己定位在以下div之上

3 个答案: