在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

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

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>

Answer 2

<script>  
function favTutorial() {  
var mylist = document.getElementById("myList");  
document.getElementById("favourite").value = mylist.options[mylist.selectedIndex].text;  
}  
</script>  
<div class="Post-body"><p><a href="https://www.netflix.com/" rel=" nofollow ugc">https://www.netflix.com/
<select id = "myList" onchange = "favTutorial()" >  
<option> ---Choose tutorial--- </option>  
<option> w3schools </option>  
<option> Javatpoint </option>  
<option> tutorialspoint </option>  
<option> geeksforgeeks </option>  
</select>  </a>

您需要创建一个具有特定ID的select，并使用该ID来显示下拉列表。如果所有下拉列表的内容相同，你也可以使用class (document.getElementsByClassName)。

https://www.javatpoint.com/how-to-create-dropdown-list-using-javascript

请参考此链接。