不知道如何命名该线程:
我构建了自己的小下拉菜单。
$('.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/
它工作得很好。单击页面上的其他任何位置以及单击另一个下拉菜单时,它会折叠。但是,当再次单击最初展开下拉列表的第一个子项时,如何使其也折叠起来。
现在,当我展开它并再次单击第一个元素时,它不会再次折叠。知道如何解决这个问题吗?
最佳答案
使用切换
:
$('.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/
更新:我错过了单击其他扩展器会隐藏前一个扩展器的部分。更新我的代码并为此进行修改。
关于jquery - 单击扩展器时使自定义下拉列表也折叠吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7067828/