jquery：自定义选择框问题？_Jquery_Select

jquery：自定义选择框问题？

jquery select

jquery：自定义选择框问题？,jquery,select,Jquery,Select,嘿，伙计们，我用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="destin

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

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

我还希望在单击页面上的其他位置时，selectbox会折叠，因此我正在收听$（文档）上的单击事件。那很好用

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

请参见我的示例：当您展开第二个选择框，然后直接单击上面的选择框时，它不会折叠。两者都保持开放

知道如何解决吗？

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

允许财产权

为每个ul的父div分配id

存储每个单击的li的div

仅折叠没有存储的父ID的lis

id属性比较检查应该有效，因为id在页面中必须是唯一的

你可以

下面是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>



一个
两个
三个
四个


五个
六个
七个
八个