由于在浏览器上的位置，jsTree 上下文菜单未显示所有选项 window

Question

我正在使用的 Web 应用程序包含一个带有 contextmenu 插件的 jsTree (v3.1.1)。这一切都正常工作，但是当我右键单击靠近页面底部的节点时，它会切断一些选项。见下图：

Contextmenu on jsTree getting cut off if too close to the bottom of the browser window

我看过 jsTree API Show at Node，但这只是指定上下文菜单是否应显示在 selected 节点下方或鼠标位置点击。

如果有人可以提供一些指导，告诉我如何计算如果没有足够的 space 来显示整个上下文菜单（所有选项可见），以这种方式显示它用户能够看到所有选项。如果一个节点是 selected 并且有足够的 space 用于上下文菜单，它应该像当前默认情况下一样工作。

所以我知道该怎么做，但我不确定如何在我苦苦挣扎的 jsTree 上实现它：

获取节点的位置selected
确定上下文菜单的高度
确定可用space从select节点到浏览器底部window
如果可用space小于上下文菜单，则将上下文菜单显示到节点的顶部。如果没有 space 问题，则按当前显示。

如有任何帮助，我们将不胜感激。

Answer 1

肯定有更优雅的解决方案，但您可能需要等待很长时间。作为快速修复，我建议在显示上下文菜单后将其简单地移动到您想要的位置。用户无论如何都不会注意到它。请参阅下文并检查 fiddle - Fiddle。可能你想在移动菜单之前检查节点是否在屏幕底部，我还没有这样做。

$("#dutchData")
.on("show_contextmenu.jstree", function (e, data) {
        var $node = $('#'+data.node.id),
            $menu = $('.vakata-context').first(),
            nodeTop = $node.offset().top,
            menuTop = nodeTop + $node.height() - $menu.height(),
            menuLeft = 200,
            $subMenu = $menu.find('ul'),
            subMenuTop = $menu.height()-$subMenu.height();

    $menu.offset({left: menuLeft, top: menuTop });
    $subMenu.offset({top: subMenuTop });

})
.jstree({
    "core" : {
       "data" : data,
        "themes": {
            "url": true,
            "icons": true
        }
    },
    plugins: ['contextmenu']
});

由于在浏览器上的位置，jsTree 上下文菜单未显示所有选项 window

jsTree Contextmenu not displaying all options due to location on browser window

contextmenu

jstree