Question

我有一个输入字段和一个带有span子节点的分区

<input type="text" id="input" name="input" />

<div id="content">
    <span>option 1</span>
    <span>option 2</span>
    <span>option 3</span>
    <span>option 4</span>
</div>

我正在尝试对select下拉列表进行jQuery模拟。

$('#content').hide();
$('#input').focus(function(){
    $('#content').show();
});

$('#content span').click(function(){
    $('#input').val($(this).html())
    $('#content').hide();
});

一切都运行正常，但我无法弄清楚如何在输入模糊上隐藏div。如果我把它放在jQuery中

$('#input').blur(function(){
    $('#content').hide();
});

然后我无法点击span元素

Answer 1

我想我已经找到了 http://jsfiddle.net/NQbgX/1/

$('body').click(function(){
    if (!$("#input").is(":focus")) {
        $('#content').hide();
    }           
});

Answer 2

您可以使用setTimeout之类的{{1}}来完成此操作，以便有足够的时间点击范围进行注册。

Answer 3

我认为这是正确的用法：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#content { margin:0px; padding:0px; list-style-type:none; display:none;}
#content li { margin:0px; padding:0px; list-style-type:none;}
#content li a { 
    display:inline-block; 
    padding:10px; 
    text-align:left; 
    color:white; 
    background-color:black;
    text-decoration:none; 
    width:150px;
}
#input { height:25px; width:167px;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
    $('#input').focus(function(){
        $('#content').slideDown('fast');
    });
    $('#content li a').click(function(){
        var x = $(this).attr('title');
        $('#input').attr('value',x);
        $('#content').slideUp('fast');
    }); 
});
</script>
</head>
<body>
<input type="text" id="input" name="input" value="" />
<ul id="content">
    <li><a href="#" title="option1">Option1</a></li>
    <li><a href="#" title="option2">Option2</a></li>
    <li><a href="#" title="option3">Option3</a></li>
    <li><a href="#" title="option4">Option4</a></li>
</ul>
</body>
</html>

然后在输入旁边添加一个箭头图像，以便#content在点击时会滑动。

jQuery <select>模拟输入和div </select>

3 个答案: