Javascript 动态更改jquery上下文菜单

我在用这个。菜单的实例化如下所示：

$.contextMenu({
    selector:'.disposition-menu',
    zIndex: 120,

    callback: function(key, options) {
        var stepID = $(this).closest('.card').attr("id").substring(5);
        handle_disposition(key,stepID);

    },
    items: {
        "pin": {name: "Pin to top"},
        "unpin": {name:"Unpin"},
        "complete": {name: "Mark step completed"},
        "remove": {name: "Remove step from Map"},
   },
   events: {
       show: function(){}, //this is where I'm lost
       hide: function(){} //this is where I'm lost
   },
    trigger: 'hover'
}); 

<div class="card" >
    <div class="card-header ">
        <table class="title-table">
            <tr>
                <td>...</td>
                <td>...</td>
                <td>...</td>
                <td class="disposition-menu">&vellip;</td>
            </tr>
        </table>
    </div>

    <div class="card-body">
        ...{body content}
    </div>
</div>

“handle disposition”函数与php和数据库交互，将“.card”记录为固定或取消固定在数据库中，以便在重新加载页面时正确显示。HTML是一个引导4卡，如下所示：

$.contextMenu({
    selector:'.disposition-menu',
    zIndex: 120,

    callback: function(key, options) {
        var stepID = $(this).closest('.card').attr("id").substring(5);
        handle_disposition(key,stepID);

    },
    items: {
        "pin": {name: "Pin to top"},
        "unpin": {name:"Unpin"},
        "complete": {name: "Mark step completed"},
        "remove": {name: "Remove step from Map"},
   },
   events: {
       show: function(){}, //this is where I'm lost
       hide: function(){} //this is where I'm lost
   },
    trigger: 'hover'
}); 

<div class="card" >
    <div class="card-header ">
        <table class="title-table">
            <tr>
                <td>...</td>
                <td>...</td>
                <td>...</td>
                <td class="disposition-menu">&vellip;</td>
            </tr>
        </table>
    </div>

    <div class="card-body">
        ...{body content}
    </div>
</div>

...
...
...
&天鹅绒；
…{正文内容}

我要做的是在pin和unpin菜单项之间切换。一次只能在菜单上显示其中一个。如果项目已“固定”（即在数据库中标记，并由“.card”html中的数据属性表示），则应显示“取消固定”…反之亦然。同样，一旦在菜单上单击“Pin…”，应立即更改菜单以隐藏“Pin”项并显示“Unpin”项，反之亦然

---

我已经看过了插件的文档，但是在使用带有冒号（例如选择器：）和回调的键之后的函数时，我有点新手。插件显然有一个键，还有“show:”和“hide:”键（按使用，但我不知道如何将这些元素串在一起以实现我的目标。

使用

构建

：

如果在注册时找到生成回调，则不会生成菜单 马上。菜单创建延迟到菜单 实际上是为了展示

$.contextMenu({
选择器：“.菜单”，
构建：函数（$trigger）{
变量选项={
回调：函数（键、选项）{
var m=“单击：”+键；
警报（m）；
},
项目：{}
};
if（$trigger.hasClass（'pin'））{
options.items.unpin={name:“unpin”}；
}否则{
options.items.pin={name:“pin”}；
}
返回选项；
}
})；

菜单{
宽度：100px；
填充：10px；
背景：红色；
利润率：10px；
颜色：#FFF；
}

别针
取消绑定

以下是我如何解决“菜单项交换”问题的。感谢@ahed kabalan为我指明了正确的方向

HTML没有改变我在上面发布的问题。为了方便起见，这里再次显示：

<div class="card" >
    <div class="card-header ">
        <table class="title-table">
            <tr>
                <td>...</td>
                <td>...</td>
                <td>...</td>
                <td class="disposition-menu">&vellip;</td>
            </tr>
        </table>
    </div>

    <div class="card-body">
        ...{body content}
    </div>
</div>

---

希望其他人会觉得这很有用！

太好了。这为我指明了正确的方向。但是，在HTML中，只有一个元素

&vellip；

。因此，pin和unpin必须切换到同一个元素，而不是两个单独的元素。你能说明你的代码在这种情况下是如何工作的吗？为了清晰起见，我在我的问题中添加了HTML。Also代码片段没有任何作用。此外，如果我正确阅读文档，$trigger是显示菜单的事件。在我的情况下，我不希望每次显示菜单时都更改它，仅当单击

pin

或

unpin

菜单项时。将类添加到处置菜单并动态构建上下文基础右键单击是这些类的关键，请找到上面编辑的答案。在我的上下文中没有右键单击。不确定你指的是什么。