Question

我通过扩展jQuery UI＆＃39; s Menu创建了自定义小部件。它基本上需要使用像ui.selectmenu这样的<select> HTML元素，但在子菜单中显示选项：

$.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

您可以使用类来跟踪菜单的状态，并使用它来定位打开的实例。像这样的东西：

_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

我找到了解决方案。它基于JulienGrégoire提议使用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();
    });             
},

jQuery UI：如何检查是否打开了另一个小部件实例？

2 个答案: