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

Question

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

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

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

这是在我不确定该怎么做之前我能走多远：http://jsfiddle.net/jRpyp/

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

还有 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>

Answer 1

首先，#popup 需要设置为absolute 的定位。这将使您能够将其放置在页面上的任何位置，无论它出现在 HTML 中的什么位置。

这是你应该使用的基本 jQuery ¹

function (e) {
    var pos = $(this).position(); // Gets the position of the link
    var width = $(this).outerWidth(); // Gets the width of the link
    $("#popup").css({
        top: pos.top + "px", // Uses the top positioning of the link to put it in the same area
        left: (pos.left + width) + "px" // First puts the menu in the same leftward position of the link, then adds the width to prevent overlap
    }).show();
}

这将确保无论链接在哪里，它都会显示在链接附近

如果您想在链接和菜单之间添加更多空间，只需添加+ 和一个数字

例如

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

Fiddle

---

_{1：由https://stackoverflow.com/a/158176/1470950提供}

Answer 2

您想要与http://jsfiddle.net/jRpyp/4/ 脚本的更新版本类似的东西吗？

$("#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 更容易访问它）。

（我希望我的问题是正确的。）

Answer 3

好的，我找到了一个可行的答案。我不确定这是不是最好的解决方法，所以我会继续打开它，以防其他人找到更好的东西。

首先我做了一些研究，发现了 jQuery offset() 函数，它可以让我获得链接的位置。从那里我将 div 的位置设置为链接。我遇到了一些问题，悬停对鼠标的位置过于挑剔，所以我创建了一个大 div 围绕带有左填充的链接，这样在显示菜单时链接本身就不会被隐藏，这样我就可以在菜单之外有一点摆动空间，以防止它消失。更改 div 的定位和填充将使鼠标在菜单淡出之前可以移动的距离更加灵活。

这是fiddle。

这是减去 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");
});