Jquery“不同的自定义”；右键单击"；根据按下的选项卡选择菜单

我制作了一个自定义的右键菜单，右键单击时显示在div上方，名为“demo container”。一切正常，但我需要更复杂的东西。确切地说，我需要不同的自定义菜单显示上面的演示容器，每次你按不同的标签。因此，默认行为是，按tab“Step 1”时，它将在“demo container”上方显示带有类“custom-menu1”的菜单；按tab“Step 2”时，它将在“demo container”上方显示带有类“custom-menu2”的菜单；按tab“Step 3”时，它将在“demo container”上方显示带有类“custom-menu3”的菜单……等等

我尝试了一些东西。单击，但失败了

您可以在my JSFIDLE中使用一个自定义右键单击菜单查看和编辑示例：

html:

css:

这样的事情可能吗？请帮助我，因为我迷路了，我试图用几种方法解决它，但我对jQuery一无所知，所以我不知道如何

这个问题能有不同的解决方法吗？什么都可以接受

---

谢谢

如果将jquery更改为以下内容，则应应用正确的右键单击：

function showMenu(step) {
    var menu = $("div.custom-menu" + step);
    $('#demo-container').bind("contextmenu", function (event) {
        event.preventDefault();
        menu.appendTo("body").css({
            top: event.pageY + "px",
            left: event.pageX + "px"
        }).show();
    }).bind("click", function (event) {
        if (!$(event.target).is(".custom-menu" + step)) {
            menu.hide();
        }
    });
}

$('.nav a').on('click', function() {
    $('.dropdown-menu').hide();
    var step = $(this).attr('href').substr(9);
    showMenu(step);
});

showMenu(1);

请注意，自定义菜单类编号必须与步骤编号匹配

---

如何添加一个结尾没有数字的具有不同a的li…例如。。。其中5个是这样的，最后一个是finish？如果您将一个类添加到希望可单击的类中（在示例中，我给了他们一个

菜单类

），您可以检查该类，然后绑定新菜单或取消绑定右键单击操作：。如果你需要一个上下文菜单完成，你可以做一些事情，你不能有相同的类为您的标签和自定义菜单，否则这将发生：是的，我做了它。。。我只是把链接还给你，这样你就可以看到：）谢谢！

    //1st rightclick menu
$('#demo-container').bind("contextmenu", function (event) {
    event.preventDefault();
    $("div.custom-menu").show();
    $(".custom-menu").appendTo("body").css({
        top: event.pageY + "px",
        left: event.pageX + "px"
    });
}).bind("click", function (event) {
    if (!$(event.target).is(".custom-menu")) {
        $("div.custom-menu").hide();
    }
});

    .custom-menu {
z-index:1000;
position: absolute;
padding: 2px;
}
.custom-menu > .btn {
margin: 2px 0px 2px 0px!important;
}

#demo-container{
width:250px;   
}

function showMenu(step) {
    var menu = $("div.custom-menu" + step);
    $('#demo-container').bind("contextmenu", function (event) {
        event.preventDefault();
        menu.appendTo("body").css({
            top: event.pageY + "px",
            left: event.pageX + "px"
        }).show();
    }).bind("click", function (event) {
        if (!$(event.target).is(".custom-menu" + step)) {
            menu.hide();
        }
    });
}

$('.nav a').on('click', function() {
    $('.dropdown-menu').hide();
    var step = $(this).attr('href').substr(9);
    showMenu(step);
});

showMenu(1);