Question

嘿伙计们，我用hss和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

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

允许推广
将ID分配给每个ul的父div
存储每个点击的李的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>

Answer 2

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

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

jquery：自定义选择框问题？

2 个答案: