jquery - jQuery:自定义选择框-当未选择任何内容时折叠

大家好，
我正在尝试使用jquery构建一个简单的自定义选择框。

的HTML：

<div class="select">
    <ul>
        <li class="option darr">Dropdown one</li>
        <li class="option">Dropdown two</li>
        <li class="option">Dropdown three</li>
    <ul>
</div>

jQuery的：

$('.select ul li.option').click(function() {
    $(this).siblings().toggle().removeClass('darr');
    $(this).addClass('darr');
})

您可以在此处查看工作示例：http://jsfiddle.net/WFTvq/2/

这实际上可以正常工作，但是有一件小事困扰我。
当我单击自定义选择字段时，将显示所有选项。如果我没有选择任何一个选项，然后单击窗口上的其他任何位置，则下拉菜单不会自动折叠。

如果我单击屏幕上的其他任何位置，则普通选择框将折叠，如何在示例中实现该行为？

谢谢

H

最佳答案

在Make a search menu disappear when the search field loses focus, but still allow user to click on links处回答了类似的问题

您可以执行以下操作来检测何时在外部单击了鼠标

$(document).click(function(){
   ...
});

您示例的完整代码

$('.select ul li.option').click(function(e) {
    e.stopPropagation();
    $(this).siblings().toggle().removeClass('darr');
    $(this).addClass('darr');
});


$(document).click(function() {
    $('.select ul li.option').siblings().not('.darr').css('display', 'none');
});

在http://jsfiddle.net/WFTvq/3/中查看工作示例

关于jquery - jQuery:自定义选择框-当未选择任何内容时折叠，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/5206789/