jquery：自定义选择框问题？答案

【问题标题】：jquery: custom select box problem?jquery：自定义选择框问题？
【发布时间】：2011-04-22 21:11:51
【问题描述】：

大家好，我已经用 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);
        }

    });

});

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

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

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

在此处查看我的示例：http://jsfiddle.net/UWSUk/ 当您展开第二个选择框，然后直接单击上面的选择框时，它不会折叠。两者都保持打开状态。

知道如何解决这个问题吗？

【问题讨论】：

标签： jquery select

【解决方案1】：

您可以通过以下方式解决此问题：

允许传播
为每个 ul 的父 div 分配 ID
存储每个点击的 li 的 div
仅折叠没有存储父 ID 的 lis。

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>

【讨论】：

【解决方案2】：

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

（未优化）http://jsfiddle.net/jbEyJ/1/

【讨论】：