javascript 有没有一种通用的方法来“关闭”一个 <select> 下拉菜单（不是 .blur() ）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12901688/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a universal way to "close" a <select> dropdown menu (not .blur() )?
提问by Aust
There's a neat trick you can use to "close"a <select>dropdown menu.
还有，你可以使用一个巧妙的方法“关闭”一个<select>下拉菜单。
$('#test').click(function(){
$('#test').hide();
setTimeout(function(){
$('#test').show();
},20);
});?
This seems to always work for Chrome and Firefox on Windows. IE works in my actual code, but when I test the jsfiddle code in IE, it doesn't work. And on a mac, this doesn't work for any browser. The difference between Mac and Windows is that on Mac, the options are opened in their own element (kinda - inspecting the page shows no new elements). So the dropdown bar hides and comes back, but the new menu with the options aren't considered a part of $('#test')so they don't hide. In Windows, the menu with options is considered part of $('#test')so when you hide that, the menu hides along with it.
这似乎总是适用于 Windows 上的 Chrome 和 Firefox。IE 在我的实际代码中工作，但是当我在 IE 中测试 jsfiddle 代码时，它不起作用。在 Mac 上，这不适用于任何浏览器。Mac 和 Windows 之间的区别在于，在 Mac 上，选项在它们自己的元素中打开（有点 - 检查页面显示没有新元素）。因此下拉栏会隐藏并返回，但带有选项的新菜单不被视为其中的一部分，$('#test')因此它们不会隐藏。在 Windows 中，带有选项的菜单被认为是其中的一部分，$('#test')因此当您隐藏它时，菜单也会随之隐藏。
So the question is, is there a way to "close" a <select>dropdown menu that works in any browser and on any OS?
所以问题是，有没有办法“关闭”一个<select>可以在任何浏览器和任何操作系统上运行的下拉菜单？
UPDATE更新
I don't mean using .blur()and this is why. I have some code that emulates a dropdown menu but is actually <select multiple>. So I have just a normal <select>visible and when I click on it, I replace it with an absolutely positioned <select multiple>element. After selecting the options, this goes away and the <select>element comes back. Any help on this would be great.
我的意思不是使用.blur()，这就是原因。我有一些模拟下拉菜单的代码，但实际上是<select multiple>. 所以我只有一个正常的<select>可见，当我点击它时，我用一个绝对定位的<select multiple>元素替换它。选择选项后，这会消失，<select>元素又回来了。对此的任何帮助都会很棒。
采纳答案by Ian
If you change the event from clickto focus, it might help:
如果您将事件从 更改click为focus，它可能会有所帮助：
$("#test").focus(function () {
// Your original code
// or: this.blur();
// just DON'T call this.focus()
});
回答by Huangism
I haven't tested it yet but I would imagine, you can just
我还没有测试过，但我想，你可以
$('select').blur();
or set focus on something else to close it
或将焦点放在其他事情上以关闭它
Update - oh there you go first commenter has the fiddle
更新 - 哦，你去第一个评论者有小提琴
回答by Selvakumar Arumugam
How about using .blur()on click().. unfortunately I cannot test them all now..
如何使用.blur()上click()..可惜我不能现在都对其进行测试..
$('select').click(function(){
$(this).blur();
});
回答by Jashwant
selectis not meant for this, you can however create some other markup to fakethe selectlayout.
select不是为了这个，但是您可以fake为select布局创建一些其他标记。
HTML
HTML
JS
JS
$('#test').click(function() {
$(this).toggleClass('open');
}).find('li').not(':first').on('hover',function() {
$(this).parent().removeClass('open');
});?
CSS
CSS
ul {
list-style:none ;
border : solid 1px Gray;
width: 80px;
height: 20px;
overflow:hidden;
cursor:pointer;
}
ul.open {
height: 60px;
}
?
?
Here's a demo. You can style the markup as you want.
这是一个演示。您可以根据需要设置标记样式。
