0

我通过扩展 jQuery UI 的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()方法中看到它：

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

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

编辑：

  1. this.originalSelect是<select>HTML 元素
  2. this.button是 div 元素。在其上显示选定的选项文本（基本上与ui.selectmenu所做的相同）；
4

2 回答 2

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');
}
于 2015-10-24T12:35:36.830 回答
0

我找到了解决方案。它基于Julien Gré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();
    });             
},
于 2015-10-29T08:34:46.693 回答