javascript - 在 div 内的每个链接旁边添加一个下拉菜单

Question

我正在寻找一种在 .Post-body div. 中的每个链接之后放置一个迷你下拉菜单的方法，但我找不到正确的方法。

我的示例 div: https://jsfiddle.net/0zc4pbqh/2/

<div class="Post-body"><p><a href="https://www.netflix.com/" rel=" nofollow ugc">https://www.netflix.com/</a> lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum <a href="https://www.netflix.com/" rel=" nofollow ugc">https://www.netflix.com/</a>  lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p></div>

正确的做法是什么？

附注我想用网站截图(来自 api)填充此下拉列表。

Answer 1

试试这个，虽然它有一些错误，当你去页面底部或右端可以调整

const pbody = document.querySelector(".Post-body"),
        ancS = pbody.querySelectorAll("a"),
        menu = pbody.querySelector(".menu")

ancS.forEach(each=>{
    each.addEventListener("mouseover",e=>{
        let cords = each.getClientRects()[0],
            x = cords.x, 
            y = cords.y,
            offset = {x:0,y:40}
        menu.style.display="block"
        menu.style.left = (x + offset.x) + "px"
        menu.style.top = (y + offset.y) + "px"

        // on menu show (each is current anchor tag)
        menu.innerHTML = "you are hovering over :" + each.href
    })
    each.addEventListener("mouseout",e=>{menu.style.display="none"})
})

.menu {
    position: absolute;
    width: 300px;
    height: 300px;
    background:white;
    box-shadow: 0px 0px 0px 2px black;
    display: none;
}

<div class="Post-body">
    <p><a href="https://www.netflix.com/" rel=" nofollow ugc">https://www.netflix.com/</a>
        sdfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsf
        sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd
        sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf
        sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd
        sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf
        sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd
        sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf
        sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd <a href="https://www.youtube.com/"
            rel=" nofollow ugc">https://www.youtube.com/</a> dsfdsfdsfdsfdsfdsfd sfdsfdsfdsf
        sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd
        sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd sfdsfdsfdsf
        sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd
        sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd sfdsfdsfdsf
        sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd</p>
        <div class="menu">
            this is menu
        </div>
</div>