如何在单击的项目下方显示详细div /弹出框

Question

我正在尝试使用html构建一个布局，例如跟随两个图像。

每个项目的详细div / popup应该在单击的项目正下方打开..

如果是桌面

如果是手机/平板电脑

现在我不知道如何继续前进..

请指出我正确的方向或给我一些演示网站的链接，这种功能正在发生 请帮我解决这个问题..

Answer 1

有几种方法......其中一个在干净的javascript中就是有一个容器加载数据或许多容器（每个元素一个）。

1. 为信息创建容器元素

   var someContainer = "<div id='msgContainer'>someMessage</div>";

2. 在元素上或以其他方式定义onclick ='elementClicked（event）'动作

   function elementClicked(event) { //get mouse coords where clicked //mouse X event.clientX; //mouse Y event.clientY; //get element you use as a container for messages //var msgContainer = document.getElementById("msgContainer"); //this will set //load container with any info if you're using one container element for all 'menus' //msgContainer.style.position = "absolute"; //msgContainer.style.top = event.clientY"; //msgContainer.style.left = event.clientX; }

或者正如我所说，每个元素可以有一个隐藏的容器（div或任何其他元素），然后你只需要显示和隐藏它们。

使用jquery，这一切都应该更容易。