我编写了一个简单的上下文菜单,该菜单在右键单击无序列表的li
后显示。
它工作正常,但它看起来很奇怪,并随着html浮动。
它应该看起来像这样:
我真的希望有人能帮助我了解最新情况。我需要上下文菜单显示在li
下方。
请将此脚本添加到tampermonkey
引擎,然后在this page上试用:
// ==UserScript==
// @name Burning Series
// @namespace http://bs.to/
// @version 1.0
// @description -
// @author Me
// @match https://bs.to/andere-serien
// @require https://code.jquery.com/jquery-3.3.1.min.js
// @grant GM_addStyle
// ==/UserScript==
GM_addStyle('.contextMenuParent { position: relative; }');
GM_addStyle('.contextMenuContainer { position: absolute; background: gray; z-index: 100; -webkit-box-shadow: 10px 10px 31px -1px rgba(0,0,0,0.75);-moz-box-shadow: 10px 10px 31px -1px rgba(0,0,0,0.75);box-shadow: 5px 5px 15px -1px rgba(0,0,0,0.75);}');
GM_addStyle('.contextMenu { display: grid; padding: 4px; width: 200px; border: 1px solid black; color: black; }');
GM_addStyle('.contextMenu li { border-bottom: 1px solid gray; }');
GM_addStyle('.contextMenu li:hover { cursor: pointer; color: red; }');
var contextMenuLinks =
"<li class='contextMenu01'>A</li>"+
"<li class='contextMenu02'>B</li>" +
"<li class='contextMenu03'>C</li>" +
"<li class='contextMenu04'>D</li>" +
"<li class='contextMenu05'>E</li>" +
"<li class='contextMenu06'>F</li>";
$(document).ready(function() {
$("div.genre > ul > li").each(function(i, obj) {
$(this).addClass("contextMenuParent");
$(this).contextmenu(function(e) {
e.preventDefault();
$(".contextMenuContainer").remove();
$(this).append("<div class='contextMenuContainer'><ul class='contextMenu'>" + contextMenuLinks + "</ul></div>");
});
});
$(document).on("click", ".contextMenu li", function() {
var c = $(this).attr("class");
alert("test:" + c);
var title = $(this).closest(".contextMenuParent").find("a").attr("title");
$(".contextMenuContainer").remove();
});
});
答案 0 :(得分:1)
您应该使用fixed
定位并通过javascript计算坐标。我还向$(window)
添加了一个滚动事件,因此您可以重新计算坐标并移动固定元素。
fixed
表示文档上的精确xy坐标 ,因此您需要从位置中减去$(window).scrollTop()
以获取屏幕坐标,并添加{{1} } height
,所以它恰好位于元素下方(不重叠)。
这是代码,我用Tampermonkey测试它,它工作正常。
li