Question

我目前正在为我的表列创建一个上下文菜单，但是有一些问题。希望有人能帮助我。

现在问题是

<menu>没有在Fire Fox中展示，但Chrome和IE工作正常。
当我右键单击时，菜单应显示在<td>

HTML：

<table>
   <tr>
    <td class="element">im here</td>
   </tr>
</table>

<menu type="context" id="menu">
    <menuitem label="Cancel this app"></menuitem>
</menu>

JQUERY

$("menu").hide();

$(document).on("contextmenu", ".element", function (e) {
    $("menu").show();

    return false;
});

$(document).mouseup(function (e) {
    $("menu").fadeOut(300);
});

CSS

    menu {
    display: block;
    position: absolute;
    top: 50px;
    left: 50px;
    margin: 0;
    padding: 3px 0 4px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.35);
    border-radius: 4px;
    font-family: Lucida Grande;
    font-size: 14px;
    line-height: 15px;
}
menu::before {
    display: block;
    position: absolute;
    content:"";
    top: -1px;
    left: -1px;
    bottom: -1px;
    right: -1px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.125);
    z-index: -1;
}
menu hr {
    border: none;
    height: 1px;
    background: rgba(0, 0, 0, 0.10);
    margin: 6px 1px 5px;
    padding: 0;
}
menu menuitem {
    display: block;
    padding: 0 20px;
    border-top: 1px solid rgba(0, 0, 0, 0);
    border-bottom: 1px solid rgba(0, 0, 0, 0);
}
menu menuitem::after {
    vertical-align: 2px;
    content: attr(label);
}
menu menuitem:hover {
    background: -webkit-linear-gradient(top, #648bf5, #2866f2);
    background: linear-gradient(to bottom, #648bf5 0%, #2866f2 100%);
    border-top: 1px solid #5a82eb;
    border-bottom: 1px solid #1758e7;
}
menu menuitem:hover::after {
    color: #fff;
}

Jquery上下文菜单

0 个答案: