jquery:自定义选择框问题？

Question

嘿，伙计们，我用css和jquery在html中建立了我自己的选择框。

<div class="select">
    <ul>
        <li class="destination option small darr loc">One</li>
        <li class="destination option small loc">Two</li>
        <li class="destination option small loc">Three</li>
        <li class="destination option small loc">Four</li>
    </ul>
</div>

jQuery：

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

$(document).click(function(e) {

    $('.select ul li.option').each(function() {

        if ( !$(this).is(":hidden") ) {
            $(this).not('.darr').slideToggle(100);
        }

    });

});

因此，当单击第一个项目时，选择框会像下拉菜单一样展开。当单击其中一个选项时，选择框再次折叠。

我还希望选择框在单击页面上的其他位置时折叠，因此我正在监听$(文档)上的单击事件。这很好用。

我唯一的小缺陷是，当在页面上有多个选择框时，我展开其中的一个并单击另一个选择框，前一个不会折叠。

在这里看我的例子：http://jsfiddle.net/UWSUk/当你展开第二个选择框，然后直接点击上面的选择框时，它不会折叠。两家公司都继续营业。

你知道怎么解决这个问题吗？

Answer 1

您可以通过以下方式修复此问题：

1. 允许将propegation
2. Assigning ID保存到每个ul
3. 的父div中，而不存储每个单击li
4. 的div。

仅折叠没有存储的父ID的列表。

id属性比较检查应该起作用，因为id在页面中必须是唯一的。

你可以使用see it working here。

这是Javascript：

var currentSelectDiv = null;
$('.select ul li.option').click(function(e) {
    // store the id attribute
    currentSelectDiv = $(this).parents("div.select").attr("id");

    $(this).siblings().slideToggle(100).removeClass('darr');
    $(this).addClass('darr');
    // allow bubbling because we want this event to close other classes
});

$(document).click(function(e) {
    $('.select ul li.option').each(function() {
        // check IDs to make sure we are only closing the other lis, not our own
        if($(this).parents("div.select").attr("id") !=
           currentSelectDiv) {
            if ( !$(this).is(":hidden") ) {
                $(this).not('.darr').slideToggle(100);
            }
        }
    });
    // clear the currently clicked parent
    currentSelectDiv = null;
});

下面是HTML：

<div class="select" id="first" style="z-index:2">
    <ul>
        <li class="destination option small darr loc">One</li>
        <li class="destination option small loc">Two</li>
        <li class="destination option small loc">Three</li>
        <li class="destination option small loc">Four</li>
    </ul>
</div>

<div class="select" id="second">
    <ul>
        <li class="destination option small darr dest">Five</li>
        <li class="destination option small dest">Six</li>
        <li class="destination option small dest">Seven</li>
        <li class="destination option small dest">Eight</li>
    </ul>
</div>

Answer 2

与其他解决方案类似，您可以指定ID，并在单击时隐藏不是所单击选择的ID的所有选择。

(未优化) http://jsfiddle.net/jbEyJ/1/