Question

在jQuery中创建自定义选择下拉插件时出现问题。我正处于一次即开即用的功能中。这意味着，当您打开下拉列表时，其他（s）将关闭我的第一个想法是创建一些全局数组，其中所有下拉列表都作为对象。然后在“打开”功能中，我会添加第一行，首先检查没有下拉列表打开（如果打开，然后关闭它们。）

我创建了一个非常缩放的脚本版本：http://jsfiddle.net/ngGGy/1/
想法是当时只打开一个下拉菜单。这意味着，当你打开一个时，必须关闭其他的，否则当打开一个新的时，它们会自动关闭。

Answer 1

您的下拉设置似乎就像手风琴一样。

如果您将每个下拉列表包含在一个div中，然后使用它来定位您拥有的所有下拉列表，则更容易实现。

我forked your jsfiddle有一个工作示例。

（编辑更新小提琴链接）

Answer 2

您可以跟踪DropDownSelect个列表，如下所示：http://jsfiddle.net/pimvdb/ngGGy/3/。

(function($){
    var lists = $(); // cache of lists

    $.fn.DropDownSelect = function (settings) {
        jQuery.globalEval("var zindex = 100");

        var thiselement = $(this);
        var thislist = thiselement.next('ul');
        lists = lists.add(thislist); // add current one to cache

        thiselement.click(function () {
            lists.slideUp(); // hide all lists initially

            if (thislist.is(':visible')) {
                thislist.slideUp();
            } else {
                thislist.css('z-index', ++zindex).slideDown();
            }
        });
    };
})(jQuery);

Answer 3

你肯定是在正确的轨道上，但如果你只打算一次打开一个下拉列表，那么你希望它们以某种方式相关。幸运的是你的标记已经存在，所以我们所要做的就是修改JS。我在这里更新了你的jsFiddle项目：http://jsfiddle.net/ninjascript/ngGGy/4/

首先是选择器。 jQuery将允许您使用^=这样选择相似的属性：

$('div[id^=button]').DropDownSelect();

现在我们只需更新你的插件了。请注意，曾经是'thislist'的东西现在被称为'everylist'。现在，我们可以在打开与单击的按钮关联的列表之前强制执行每个列表单击关闭。

(function($){            
    $.fn.DropDownSelect = function (settings) {
        jQuery.globalEval("var zindex = 100");

        var thiselement = $(this);
        var everylist = thiselement.next('ul');

        thiselement.click(function () {
            var thislist = $(this).next('ul');
            if (everylist.is(':visible')) {
                everylist.slideUp();
            }
            thislist.css('z-index', ++zindex).slideDown();
        });
    };
})(jQuery);

祝你好运！

Answer 4

为什么不提出所有下拉订阅的事件。传入当前正在打开的id（或实例）。在处理程序中检查处理实例是否是正在打开的实例。如果没有，请关闭它。

如何在打开新元素时隐藏/关闭其他元素？

4 个答案: