I am using jquery-contextmenu in my application.

I have a use case where I set visible false to items in context-menu based on some logic, now I want to hide the unnecessary separator above it . I tried the below code. It does not work.

"separator5": {
    type: "cm_separator",
    visible: function (data) {
        if (//some condition, when true i want to hide the separator) {
            return false;
        } else {
            return true;
        }
    },
},

CodePudding user response：

You can specify a function to be called in order to determine if a menu item is visible or not. In the example below, the menu item "cut" is hided - you can do it the same way with your seperator and apply some logic before.

    $(function() {
        var itemsVisible = {};
    
        $.contextMenu({
            selector: '.context-menu-one', 
            callback: function(key, options) {
                var m = "clicked: "   key;
                window.console && console.log(m) || alert(m); 
                console.log(key,options);
            },
            items: {
                "edit": {name: "Edit", icon: "edit"},
                "cut": {name: "Cut", icon: "cut", visible: function(key, opt) {
                    return itemsVisible[key];
                  }
                },
               copy: {name: "Copy", icon: "copy"},
                "paste": {name: "Paste", icon: "paste"},
                "delete": {name: "Delete", icon: "delete"},
                "sep1": "---------",
                "quit": {name: "Quit", icon: function(){
                    return 'context-menu-icon context-menu-icon-quit';
                }}
            }
        });

        itemsVisible["cut"] = false; 
        
        
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.9.2/jquery.contextMenu.min.js" integrity="sha512-kvg/Lknti7OoAw0GqMBP8B 7cGHvp4M9O9V6nAYG91FZVDMW3Xkkq5qrdMhrXiawahqU7IZ5CNsY/wWy1PpGTQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<span >right click me</span>