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");
});

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

3 个答案: