jQuery - 右键菜单插件contextMenu使用详解2（菜单自动关闭、一直打开）
五、让菜单能够自动关闭
默认情况下当菜单打开后，只有发生鼠标点击事件后菜单才会关闭（可以是点菜单项，或者点击页面上任意位置）。如果将 autoHide 属性设置为 ture，只要鼠标移出触发对象，菜单就会自动关闭。
1，效果图
右键点击“按钮1”打开菜单。如果这时将鼠标从“按钮1”上移开，菜单会自动隐藏。
2，样例代码
<button class="context-menu-one">按钮1</button>
<script type="text/javascript">
$(function() {
//初始化菜单
$.contextMenu({
selector: '.context-menu-one',
autoHide: true,
callback: function(key, options) {
console.log("点击了：" + key);
},
items: {
"edit": {name: "编辑", icon: "edit"},
}
});
});
</script>
六、保持菜单的打开状态
默认情况下点击菜单项后菜单就会自动关闭。其实只需要在回调方法中返回 false，就可以让菜单一直保持打开的状态。
1，效果图
- 菜单打开后点击“编辑”项，菜单会自动关闭。
- 如果点击的是“剪切”项，菜单仍然保持打开的状态，不会关闭。
2，样例代码
<button class="context-menu-one">按钮1</button>
<script type="text/javascript">
$(function() {
//初始化菜单
$.contextMenu({
selector: '.context-menu-one',
callback: function(key, options) {
console.log("点击了：" + key);
},
items: {
"edit": {
name: "编辑",
icon: "edit",
callback: function(itemKey, opt, rootMenu, originalEvent) {
return true;
}
},
"cut": {
name: "剪切",
icon: "cut",
callback: function(itemKey, opt, rootMenu, originalEvent) {
return false;
}
}
}
});
});
</script>
