带有输入和 div 的 jQuery <select> 模拟答案

【问题标题】：jQuery <select> simulation with input and div带有输入和 div 的 jQuery <select> 模拟
【发布时间】：2012-06-29 00:40:11
【问题描述】：

我有一个输入字段和一个带有跨度子级的分区

<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 元素

【问题讨论】：

我真的不确定你想要实现什么。你能举一个你正在尝试做的例子吗？也许你在网上遇到过类似的东西。
真不知道有没有类似的。我试图成为原创 :) 就像我说的：我想模拟 html 下拉列表。 jsfiddle.net/NQbgX
@Goldie 你怎么能指望在模糊之后隐藏 div，并且仍然允许用户进行选择？具有 display:none 的元素中的所有元素；将被隐藏，无论其显示状态如何。所以这个想法充其量是不可信的。
这就是任务的美妙之处。您不应该通过查看模糊功能来寻找解决方案。
谁能帮忙解答这个问题？ stackoverflow.com/questions/16496709/…

标签： jquery select html input focus

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您可以使用setTimeout （如this）来完成，这样就有足够的时间让点击span 进行注册。

【讨论】：

不错的方法，但我发现它不是那么用户友好。我需要一些能在模糊后立即隐藏 div 的东西。
@Goldie：将setTimeout 调整为较低的值。
@Goldie：这很好，但我会提防window.click 或body.click 可能会在未来干扰其他事情......
我已将setTimeout 设置为 100，它看起来好多了。谢谢。

【解决方案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 在单击时会向上滑动。

【讨论】：

是的，但是当您在输入外部和 div 外部单击时，div 应该会消失。