无法使用 jQuery.toggle() 以编程方式切换（仅关闭）Highchart 的默认上下文菜单

Question

我根本不是专家，但我真的对此失去了理智。

我的 JSFiddle 中包含的评论应该足够清楚，但我也会在这里解释所有内容。

我希望能够在菜单已经可见时通过单击默认的汉堡包按钮来关闭 HC 的默认上下文菜单（因为原因...）。

所以我注意到了一些事情：

默认情况下，HC 使用填充定位菜单，因此 "blocking" 背景带有不可见的 div 命中框。我已经处理好了
```
padding: 0 48px !important; /* just for the demo, i'm leaving the sides on */
margin: 48px 0 !important;
```
以编程方式生成上下文菜单后，在第一次单击导出按钮期间，它会切换状态，现在他的单击事件显示上下文菜单（但我认为仅此而已）。这就是为什么我 "unbind" 它的点击事件，并添加我的。

contextMenuButton.one("click touchstart", function(e){ /* Remove HC's events because I want a special behavior and don't know how to do it any other way, maybe I can extend or something ? */ $(contextMenuButton).prop('onclick',null).off('click'); /* My behaviour */ contextMenuButton.on("click touchstart", function(n){ toastr.info("tmpButtonContextMenu " + n.type + " custom"); tmp = contextMenuButton.parent().next(".highcharts-contextmenu").first(); tmp.toggle(); }); });

在这一点上，我非常期待它能起作用。我什至尝试自己做

tmp.css("display", tmp.css("display") == "none" ? "block" : "none";

或JS

tmp[0].style.display = tmp[0].style.display == "none" ? "block" : "none";

但它仍然没有改变任何东西。

过了一会儿我注意到一个道具 hidden=true所以我试着玩了一下但没有任何改变...

我知道我应该只创建自己的菜单，这样会容易得多（无论如何我都会这样做）但此时我只想知道为什么它会这样。

tl;dr:

我正在将 HC 的默认上下文菜单的填充切换为边距，这样我就可以单击它后面的元素，并且我希望能够通过再次单击导出按钮（汉堡包）来关闭所述菜单。

PS:

我正在使用一个名为 ToastrJS 的库进行移动调试（因为我在那里没有控制台），它证明确实调用了我的 "custom" 点击。

编辑：

由于我还想保留通过单击其他任何地方关闭上下文菜单的功能，因此我对原型进行了如下稍微修改：

addEvent(doc, 'mouseup', function (e) {  
    if($(e.target.parentElement).hasClass("highcharts-contextmenu-toggler"))  
        css(menu, { display: 'none' });  
    else   
        hide();  
})

最后：

if(chart.openMenu){
    chart.openMenu = false;
} else {
    css(menu, menuStyle);
    chart.openMenu = true;  
}

Answer 1

I know I should just create my own menu and it would be much easier (and I'll be doing that anyway) but at this point I just want to know WHY it's acting the way it is.

发生这种情况是因为 Highcharts 启动了自己的隐藏上下文菜单的逻辑：

                        if (!chart.pointer.inClass(e.target, className)) {
                            hide();
                        }

因此，如果您使用 toggle()，您实际上会显示菜单（它在那一刻已经隐藏）。

解决方法：

我已经覆盖了 Chart.prototype.contextMenu 函数并注释掉了上面的代码。

现场演示： http://jsfiddle.net/BlackLabel/Lr74sou8/

无法使用 jQuery.toggle() 以编程方式切换（仅关闭）Highchart 的默认上下文菜单

Unable to programmatically toggle (close only) Highchart's default Context Menu using jQuery.toggle()

jquery

contextmenu

toggle

highcharts