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

发布于 2024-10-21 00:30:07 字数 776 浏览 1 评论 0原文

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

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

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

谢谢

你

原文

hey guys,
I'm trying to build a simple custom select box with 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');
})

You can check out the working example right here: http://jsfiddle.net/WFTvq/2/

This works fine actually, however there is one little thing that bugs me.
When I click on the custom select field all options are shown. If I do not choose one of the options and click anywhere else on the window the dropdown does not collapse autamatically.

A normal select box would collapse if I click anywhere else on the screen, how could I implement that behaviour in my example?

Thank you

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

他是夢罘是命 2024-10-28 00:30:07

在当搜索字段失去焦点时，使搜索菜单消失，但仍然允许用户单击链接

来检测何时在外部单击鼠标，

$(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');
});

请检查工作示例：< a href="http://jsfiddle.net/WFTvq/3/" rel="nofollow noreferrer">http://jsfiddle.net/WFTvq/3/

You can detect when a mouse is clicked outside by doing

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

Full code for your example

$('.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');
});