jquery - 单击扩展器时使自定义下拉列表也折叠吗？

Question

不知道如何命名该线程:

我构建了自己的小下拉菜单。

$('.select .option').live('click', function (e) {
    e.stopPropagation();
        $(".select .option:not('.darr')").hide();
        selectedOption = $(this).parents("div.select").find(".option:first");

        $(this).siblings().show();
        selectedOption.text($(this).text()).attr("title",this.title);
});

$('.select .option:not(".darr")').live('click', function () {
    $(this).parents("div.select").find(".option:not('.darr')").hide();
    console.log($(this).attr('data-ajax-link')); 
});

$(window).click(function() {
    $(".select .option:not('.darr')").hide();
});

这是一个实时工作示例。 http://jsfiddle.net/K8VtB/4/

它工作得很好。单击页面上的其他任何位置以及单击另一个下拉菜单时，它会折叠。但是，当再次单击最初展开下拉列表的第一个子项时，如何使其也折叠起来。

现在，当我展开它并再次单击第一个元素时，它不会再次折叠。知道如何解决这个问题吗？

Answer 1

使用切换:

$('.select .option').live('click', function (e) {
    e.stopPropagation();
    // slight optimization, cache the selector for subsequent use
    var $parentDiv = $(this).closest("div.select");  

    // hide other expanders
    $parentDiv.siblings().find(".option:not('.darr')").hide();

    // toggle current expander
    $parentDiv.find(".option:not('.darr')").toggle();

    selectedOption = $parentDiv.find(".option:first");
    selectedOption.text($(this).text()).attr("title",this.title);
});

我还使用 closest("div.select") 来隔离切换到当前的 ul。

这是一个工作演示:http://jsfiddle.net/mrchief/K8VtB/11/

更新:我错过了单击其他扩展器会隐藏前一个扩展器的部分。更新我的代码并为此进行修改。