jquery：自定义选择框 - 未选择任何内容时折叠答案

【问题标题】：jquery: custom select box - collapse when nothing get's selectedjquery：自定义选择框 - 未选择任何内容时折叠
【发布时间】：2011-03-12 16:11:47
【问题描述】：

大家好，我正在尝试使用 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/

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

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

谢谢

【问题讨论】：

标签： jquery html css select drop-down-menu

【解决方案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/查看工作示例

【讨论】：