jQuery UI: 如何查看是否打开了另一个widget实例？

Question

我通过扩展 jQuery UI 的 Menu. It's basically needed to work with <select> HTML element like ui.selectmenu 创建了自定义小部件，但在子菜单中显示选项：

$.widget("market.myMenu",$.ui.menu, {
// ...
_attachEvents: function(){
    var self = this;
    // menu is initially hidden
    self.menuWrapper.hide();
    self.button.on('click', function(){
        if (self.originalSelect.is(':disabled')) {
            self.disable();
        } else {                
            self.menuWrapper.toggle();
        }
        return false;
    });

    $(document).on('click', function(){
        self.menuWrapper.hide();
    });             
},
//...
  }
}

当此小部件附加到多个元素时会出现问题，例如：

someSelect.myMenu();
//...
anotherSelect.myMenu();

问题列在标题中，可以在_attachEvents()方法中看到：

当用户点击 someSelect 时，它会正常打开
然后用户点击 anotherSelect 它也会打开
someSelect 在步骤 2 之后应该关闭，但它没有。

那么如何检查这种情况并解决这个问题？

编辑：

this.originalSelect 是 <select> HTML 元素
this.button 是 div 元素。显示所选选项文本的位置（与 ui.selectmenu 基本相同）；

Answer 1

您可以使用 class 来跟踪菜单的状态并将其用于定位打开的实例。例如：

_attachEvents: function(){
    var self = this;
    // menu is initially hidden
    self.menuWrapper.hide();
    self.button.on('click', function(){
        if (self.originalSelect.is(':disabled')) {
            self.disable();
        } else {
            // before you open a menu, you close the opened ones
            $('menu-opened').each(function(){
                $(this).myMenu('instance').hideWrapper();
            });
            self.menuWrapper.toggleClass('menu-opened');                
            self.menuWrapper.toggle();
        }
        return false;
    });

    $(document).on('click', function(){
        self.menuWrapper.hide();
    });             
},

hideWrapper: function(){
    var self = this;
    self.menuWrapper.hide();
    self.menuWrapper.removeClass('menu-opened');
}

Answer 2

我找到了解决方案。它基于 Julien Grégoire 提议使用 css 标记 class.

我正在做的是将 class ui-mymenu-wrap 添加到 self.menuWrapper 元素。所以所有的小部件都有这些标识符。我做的下一件事是在单击一个小部件后关闭所有其他菜单，然后 open/close 已单击的小部件。

_attachEvents: function(){
    var self = this;
    // menu is initially hidden
    self.menuWrapper.hide();
    self.button.on('click', function(event){
        if (self.originalSelect.is(':disabled')) {
            self.disable();
        } else {
            // hide all opened menus
            $('.ui-mymenu-wrap').not(self.menuWrapper).hide();
            self.menuWrapper.toggle();                  
        }
        return false;
    });

    $(document).on('click', function(){
        self.menuWrapper.hide();
    });             
},

jQuery UI: 如何查看是否打开了另一个widget实例？

jQuery UI: How to check whether another instance of widget is opened?

javascript

jquery

jquery-ui

jquery-ui-selectmenu

jquery-ui-menu