有没有一种通用的方法可以"close"下拉菜单<select>(不是.blur())？

Question

有一个巧妙的技巧可以用来"关闭"<select>下拉菜单。

$('#test').click(function(){
$('#test').hide();
setTimeout(function(){
$('#test').show();
},20);
});​

这似乎总是适用于Windows上的Chrome和Firefox。IE在我的实际代码中有效，但当我在IE中测试jsfiddle代码时，它不起作用。在mac上，这对任何浏览器都不起作用。Mac和Windows的区别在于，在Mac上，选项是在自己的元素中打开的(有点检查页面时没有显示新的元素)。因此，下拉栏会隐藏并返回，但带有选项的新菜单不被视为$('#test')的一部分，因此它们不会隐藏。在Windows中，带有选项的菜单被视为$('#test')的一部分，因此当您隐藏它时，菜单会随之隐藏。

所以问题是，有没有办法"关闭"适用于任何浏览器和操作系统的<select>下拉菜单

---

更新

我不是说要使用.blur()，这就是为什么。我有一些代码模拟了下拉菜单，但实际上是<select multiple>。所以我只有一个普通的<select>可见，当我点击它时，我用一个绝对定位的<select multiple>元素替换它。在选择了选项之后，这种情况会消失，<select>元素会返回。这方面的任何帮助都将是伟大的。

Answer 1

我还没有测试过，但我想，你可以只测试

$('select').blur();

或者将注意力集中在其他事情上以关闭

更新-哦，你来了第一个评论者有小提琴

Answer 2

如果将事件从click更改为focus，可能会有所帮助：

$("#test").focus(function () {
// Your original code
// or: this.blur();
// just DON'T call this.focus()
});

Answer 3

select并不适用于此，但是您可以在fake的select布局中创建一些其他标记。

HTML

选项1

选项2

选项3

​

JS-

$('#test').click(function() {
$(this).toggleClass('open');
}).find('li').not(':first').on('hover',function() {
$(this).parent().removeClass('open');
});​

CSS

ul {
list-style:none  ;
border : solid 1px Gray;    
width: 80px;
height: 20px;
overflow:hidden;
cursor:pointer;
}
ul.open {
height: 60px;   
}

​

这是一个演示。您可以根据需要设置标记的样式。

Answer 4

在click()上使用.blur()怎么样。。不幸的是，我现在不能全部测试。。

$('select').click(function(){ 
$(this).blur(); 
});

演示：http://jsfiddle.net/vqA3M/7/