Пользовательский интерфейс jQuery: как проверить, открыт ли другой экземпляр виджета?

Question

Я создал пользовательский виджет, расширив меню jQuery UI. В основном нужно работать с <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');
}

Answer 2

Я нашел решение. Он основан на предложении Жюльена Грегуара использовать класс маркеров CSS.

Что я делаю, это добавление класса ui-mymenu-wrap в self.menuWrapper элемент. Так что все виджеты имеют этот идентификатор. Затем я нажимаю на один виджет, закрываю все остальные меню и затем открываю / закрываю виджет, по которому был сделан клик.

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