Jstree 有条件地显示上下文菜单

Question

下面的代码显示了我尝试仅在级别 1 显示 jstree 上下文菜单。

菜单显示在第一级，选择菜单项会显示警报。 菜单不显示在第 2 级，这很好，我想要什么。

但是，在选择了一个 2 级节点之后，然后选择了一个 1 级节点，菜单会按原样显示，但选择菜单项没有任何作用。

任何帮助表示赞赏。

小提琴：https://jsfiddle.net/NervousElk/4p5hqg0r/17/小提琴

document.getElementById("gobtn").addEventListener("click", buildtree);

function buildtree()
{               
        $('#ttstafftree').jstree(
        {           
        plugins: ["wholerow",  "json_data", "ui", "themes", "sort", "state",  "contextmenu"], 
        'core' : 
            {                                   
                "check_callback": true,                 
                'data' : 
                    [
                    { "id" : "ajson1", "parent" : "#", "text" : "Root 1" },
                    { "id" : "ajson1-1", "parent" : "ajson1", "text" : "a" },                       
                    { "id" : "ajson2", "parent" : "#", "text" : "Root 2" },
                    { "id" : "ajson2-1", "parent" : "ajson2", "text" : "b" },                       
                    ]
            },

            "contextmenu": 
            {                                                                               
                "items": 
                {
                  opt1: 
                  {
                    label: "opt 1",                     
                    action: function(data) 
                    {
                     alert('opt 1')                      
                    }                                                                                       
                  },

                  opt2: 
                  {
                    label: "opt 2",
                    action: function(data) 
                    {
                     alert('opt 2')                      
                    }                                                                           
                  }                                                                               
                }                
            },                      
        })  

        .on('show_contextmenu.jstree', function(e, reference, element) 
        {                           
            if ( reference.node.parents.length != 1) 
            {                             
               $('.vakata-context').remove();                          
            }

        });      
}

Answer 1

您将删除 vakata-context 元素以隐藏叶节点的上下文菜单。虽然我不太确定这一点，但对我来说，这似乎破坏了上下文菜单上设置的事件处理程序，因此它们不再起作用。查看上下文菜单的源代码，jsTree 内部使用$.vakata.context.hide() 隐藏树。您可以在 show_contextmenu.jstree 事件的事件处理程序中使用它。

.on('show_contextmenu.jstree', function (e, reference, element) {
      if (reference.node.parents.length != 1) {
          $.vakata.context.hide();
          //$('.vakata-context').css('display',"none");
      }
});