jquery：自定义选择框 - 当没有选择任何内容时折叠

Question

嘿伙计们， 我正在尝试使用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/

这实际上很好用，但是有一件小事让我烦恼。 当我单击自定义选择字段时，将显示所有选项。如果我没有选择其中一个选项并单击窗口上的任何其他位置，则下拉列表不会自动折叠。

如果我点击屏幕上的其他任何地方，普通的选择框会崩溃，我怎么能在我的例子中实现这种行为？

谢谢

ħ

Answer 1

在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/

处的工作示例