Question

您可以使用"close" <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

如何在.blur()上使用click() ..很遗憾，我现在无法全部测试..

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

DEMO： http://jsfiddle.net/vqA3M/7/

Answer 4

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

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

有没有通用的方法来“关闭”<select>下拉菜单（而不是.blur（））？</select>

4 个答案: