javascript - jQuery 用户界面 : How to check whether another instance of widget is opened?

Question

我通过扩展 jQuery UI 创建了自定义小部件 Menu 。基本上需要与 <select> 一起工作HTML 元素如 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() 中看到它方法:

1. 当用户点击someSelect时它按预期打开
2. 然后用户点击 anotherSelect它还会打开
3. someSelect步骤后 2应该关闭，但事实并非如此。

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

编辑:

1. this.originalSelect是 <select> HTML 元素
2. this.button是div元素。显示所选选项文本(基本上与 ui.selectmenu 相同)；

Answer 1

您可以使用类来跟踪菜单的状态，并使用它来定位打开的实例。例如这样的事情:

_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');
}