Javascript 如何在悬停链接旁边添加弹出菜单？

我正在编写一个扩展，它将添加到现有站点，因此我无法直接修改HTML。基本上，在一个单独的div中包含一系列的链接，这些链接仅由空格分隔。我试图使用jquery在本系列中的任意位置添加我自己的链接，并在链接旁边打开一个小菜单，如右键单击上下文菜单。当链接/菜单悬停焦点消失时，它应该消失

我可以处理jquery的实际行为，但我有点担心应该在文档中的什么位置放置此菜单的html。它应该在身体的末端吗？就在链接之前/之后？然后当我把鼠标悬停在链接上时，我如何得到这个元素的正确位置？我找到了一些例子，但它们都使用列表。我只需要一个菜单上的链接悬停，出现在旁边的链接

简而言之，我主要关心的是如何将弹出div正确放置在链接旁边。其次，当我尝试将鼠标悬停在菜单上而不是链接上时，如何保持菜单打开

这是在我不确定该做什么之前我能走多远：

$（“.menu a”）.filter（函数（索引）{return$（this.text（）==“Link 3”}）。在（“| |”）之后；
$（“#弹出”）.toggle（）；
$（“#弹出链接”）。悬停(
职能（e）
{
$（“#弹出窗口”）.show（）；
},
职能（e）
{
$（“弹出”）.fadeOut（“缓慢”）；
});

以及HTML：

<div class="menu">
    <a href="#">Link 1</a> | <a href="#">Link 2</a> | <a href="#">Link 3</a> | <a href="#">Link 4</a> <br />
    <a href="#">More links</a> | <a href="#">More links</a> | <a href="#">More links</a> | <a href="#">More links</a>
</div>
<div id="popup">
    <ul>
        <li>Link 1</li>
        <li>Link 2</li>
    </ul>
</div>

|| |

|  |  | 

链接1
链接2

首先，

#popup

需要设置为绝对位置。这将使您能够将它定位在页面上的任何位置，无论它在HTML中出现在何处

这是您应该使用的基本jQuery 1

这将确保无论链接位于何处，它都会显示在链接附近

如果要在链接和菜单之间添加更多空间，只需添加

+

和一个数字

比如说

left: (pos.left + width + 10) + "px" // Would add 10 extra pixels, so it doesn't look like they are right next to each other
top: (pos.top + 20) + "px" // Adds 20 extra pixels

---

---

1:由

提供您想要与此更新版本的脚本类似的内容吗

$("#popup").toggle();
$(".menu a").hover(function (e) {

// change selected a-tags css to get a margin

$("#popup").css({
    position: "absolute",
    top: 50 + "px", // based on the position of the selected a-tag
    left: 100 + "px" // based on the position of the selected a-tag
}).show();
},

function (e) {
    $("#popup").fadeOut("slow");
});

关于你的一个问题：

我可以处理jquery的实际行为，但我有点 关心我应该把html放在文档的什么地方 这是菜单。它应该在身体的末端吗？就在会议之前/之后 链接

把html放在哪里并不重要，因为它的唯一用途是在侧面显示（在一个确定的位置）。我认为人们经常将这样的html嵌套在文档的末尾，在一个具有类似id的模板的div中（使用jQuery更容易访问）

---

（我希望我答对了。）

好的，我找到了一个有效的答案。我不确定这是最好的方法，所以我会继续，让它打开，以防其他人能找到更好的

首先，我做了更多的研究，找到了jQuery

offset（）

函数，它可以让我获得链接的位置。从那里，我将div的位置设置为链接。我有一些问题，悬停太挑剔鼠标的位置，所以我创建了一个大div，用左键填充链接，这样在显示菜单时链接本身就不会被隐藏，这样我就可以在菜单外有一点晃动的空间来防止它消失。更改div的位置和填充将使鼠标在菜单淡出前可以移动多远更加灵活

这是我的建议

下面是代码减去html/css：

$(".menu a").filter(function(index) { return $(this).text() === "Link 3"; }).after(" | <a href=\"#\" id=\"popup-link\">My text</a> | ");

var popupPosition = $("#popup-link").offset();
// Edit positioning as needed
//popupPosition.left += $("#popup-link").width();

$("#popup").offset(popupPosition);
$("#popup").css("padding-left", $("#popup-link").width());
$("#popup").toggle();

$("#popup-link").hover(
    function(e)
    {
        $("#popup").show();
    },
    function(e)
    {
        //$("#popup").fadeOut("slow");
    });

$("#popup").hover(
    function(e)
    {
        popupHovering = true;
        $("#popup").show();
    },
    function(e)
    {
        $("#popup").fadeOut("slow");
});

$（“.menu a”）.filter（函数（索引）{return$（this.text（）==“Link 3”}）。在（“| |”）之后；
var popupPosition=$（“#弹出链接”）.offset（）；
//根据需要编辑定位
//popupPosition.left+=$（“#弹出链接”）.width（）；
$（“#弹出”）。偏移量（弹出位置）；
$（“#popup”）.css（“左填充，$（“#popup link”）.width（））；
$（“#弹出”）.toggle（）；
$（“#弹出链接”）。悬停(
职能（e）
{
$（“#弹出窗口”）.show（）；
},
职能（e）
{
//$（“弹出”）.fadeOut（“缓慢”）；
});
$（“#弹出”）。悬停(
职能（e）
{
弹出悬停=真；
$（“#弹出窗口”）.show（）；
},
职能（e）
{
$（“弹出”）.fadeOut（“缓慢”）；
});

我通过javascript添加链接。我无法直接修改我正在使用此javascript的网站的HTML。对不起，我正在努力让它更清晰。基本上，我需要弹出菜单出现在链接旁边。需要什么

过滤器

功能？根据链接文本选择链接。我知道我也可以使用：eq（）或：nth-child（）。所以你只想在那个链接上使用它？只想在我添加的链接上使用。这是基于我的扩展的自定义功能，我不想在不同的页面上显示，也不想强制其他地方进入DOM。我确实想学习如何在弹出窗口上正确超时，而不是使用goofy div黑客。

$("#popup").toggle();
$(".menu a").hover(function (e) {

// change selected a-tags css to get a margin

$("#popup").css({
    position: "absolute",
    top: 50 + "px", // based on the position of the selected a-tag
    left: 100 + "px" // based on the position of the selected a-tag
}).show();
},

function (e) {
    $("#popup").fadeOut("slow");
});

$(".menu a").filter(function(index) { return $(this).text() === "Link 3"; }).after(" | <a href=\"#\" id=\"popup-link\">My text</a> | ");

var popupPosition = $("#popup-link").offset();
// Edit positioning as needed
//popupPosition.left += $("#popup-link").width();

$("#popup").offset(popupPosition);
$("#popup").css("padding-left", $("#popup-link").width());
$("#popup").toggle();

$("#popup-link").hover(
    function(e)
    {
        $("#popup").show();
    },
    function(e)
    {
        //$("#popup").fadeOut("slow");
    });

$("#popup").hover(
    function(e)
    {
        popupHovering = true;
        $("#popup").show();
    },
    function(e)
    {
        $("#popup").fadeOut("slow");
});