展示＆amp;隐藏动态内容

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中会更好。

享受编码;）