显示和隐藏动态内容

Question

好的，所以我有一个收件箱样式布局，其中包含多条消息，每条消息都有动态内容，我想单击一个链接（需要操作），一旦单击它将打开一个包含 iFrame 的下拉 div。这是我正在使用的 Javascript：

<script language="javascript"> 

function toggle() {
    var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "<iframe src=\"http://m.quotesin.com/an.html\" width=\"100px\" frameborder=\"0\" height=\"20px\" allowtransparency=\"yes\" scrolling=\"no\"></iframe>";
    }


else {
        ele.style.display = "block";
        text.innerHTML = "<iframe src=\"http://m.quotesin.com/an.html\" width=\"100px\" frameborder=\"0\" height=\"20px\" allowtransparency=\"yes\" scrolling=\"no\"></iframe>";
    }
} 

</script>

然后显示这个：

<a id="displayText" href="javascript:toggle();"><div style="posistion:relative;"><img src="images/iframe.png" style="position:absolute;"><iframe src="http://m.quotesin.com/an.html" width="100px" frameborder="0" height="20px" allowtransparency="yes" scrolling="no"></iframe></div></a>

设计视图的图像在这里...之前： 后： 但是当收件箱中有多个这些时，第二个不会打开，是否有一个简单的 css 显示和隐藏父母和孩子不会共享我可以使用的相同属性，或者关于去哪里的任何建议.

谢谢

Answer 1

就动态 HTML 而言，如果不使用 Javascript 或 JQuery，您将无法处理它。 其次，您编写的 Javascript 使用的是 getElementById，它只允许选择单个元素（指定了相同的 id。）。

由于您希望使用相同的代码来处理多个收件箱，因此您需要有容器和子选择器来帮助您获得相同的效果。
您需要使用允许多选的 id 以外的选择器。
如果我弄错了，请告诉我。如果您可以将代码放在 JS fiddel 中会更好。

享受编码；）