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

使用toggle：

$('.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/

更新：我错过了点击其他扩展程序隐藏上一个部分的部分。更新我的代码并为此而小提琴。

Answer 2

使用.toggle()。我调整了你的代码以简化。第一个单击处理程序用于.darr选项。它会隐藏除自身之外的所有选择，然后切换其选项。

第二个单击处理程序用于选项。它只设置.darr的文本，并让click事件传播到窗口以关闭选择。

我没有碰到窗口点击处理程序。

http://jsfiddle.net/K8VtB/12/

$('.select .option.darr').live('click', function (e) {
    e.stopPropagation();
    $(".select").not($(this).closest(".select")).find(".option:not(.darr)").hide();
    $(this).siblings().toggle();
});

$('.select .option:not(".darr")').live('click', function () {
    $(this).siblings(".darr").text($(this).text()).attr("title",this.title);
});

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

单击扩展器时，自定义下拉列表是否也会崩溃？

2 个答案: