如何创建一个工具栏，子菜单在鼠标移动时消失？

Question

我正在使用goog.ui.toolbar在我的网站顶部创建一个水平导航菜单（也许这就是我的问题 - 我使用的是错误的UI组件吗？）。我希望它像YUI's menubar一样工作，这样当你将鼠标悬停在工具栏中的任何项目上时，会出现一个下拉菜单，当你拖出该菜单时，它会消失（goog子菜单希望你点击其他地方在文档中让它关闭）。

我不能为我的生活弄清楚如何做到这一点。我已经将goog.ui.toolbar子类化为我自己的类，并且已经花了好几天试图让它做我想做的事，但却无处可去。我学到的一件事是我感兴趣的自动隐藏行为是由goog.ui.submenu的setHighlighted函数提供的，它覆盖了goog.ui.control的setHighlighted函数，它是goog.ui.menu的基类。 ，这并不掩饰我喜欢的方式。我想覆盖goog.ui.menu，但它是由装饰工厂生成的，我不想将子代码的一半子类化。

有没有人设法弄清楚如何做到这一点？

非常感谢！

Answer 1

这需要一些工作，但它似乎非常接近你想要的。

Psuedo Code

• 覆盖工具栏中每个菜单按钮的鼠标悬停事件
• 每当鼠标悬停时，请打开菜单
• 覆盖工具栏中每个菜单按钮的鼠标输出事件
• 每当鼠标移动时，请等待半秒钟。检查是否有孩子（菜单 项目）突出显示。如果是的话，再等一半。如果不 子菜单项突出显示，然后关闭菜单。

代码（可能需要小调整，但它已经关闭）

//...
var m1 = new goog.ui.Menu();
//... create menu items ...

var b1 = new goog.ui.MenuButton('Add Jars', m1);
b1.handleMouseOver = function(e){
    b1.setOpen(true);
};
b1.handleMouseOut = function(e){
    setTimeout(function(){example.toolbar.hideMenu(b1,m1);}, 500);
};


example.toolbar.hideMenu = function(b1, m1){
    var count = m1.getChildCount();
    var shouldClose = true;
    for(var i=0; i<count; i++){
        if(b1.isHighlighted()){
            shouldClose = false;            
        }

        if(m1.getChildAt(i).isHighlighted()){
            shouldClose = false;
        } else {
        }
    }
    if(shouldClose){
        b1.setOpen(false);
    } else {
        setTimeout(function(){example.toolbar.hideMenu(b1,m1);}, 500);
    }
};