php - 使用 jscript 显示/隐藏 div

Question

我浏览了整个网站，但找不到我想要的答案。也许我的知识还太少，但我正在努力学习更多。

事情是这样的，我有一个包含几部电影的网站，在我的数据库中进行搜索后，我只返回用户的基本数据以及与搜索参数相对应的电影，其余的数据我想要放入一个 div，并可以选择显示和隐藏同一 div。

这就是我到目前为止所拥有的:

<script type='text/javascript'>
function showDiv() {
   document.getElementById('hiddenDiv').style.display = "block";
}
</script>

<div id="hiddenDiv"  style="display:none;" class="answer_list" > WELCOME</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />

详细信息:我用 php echo 打印所有内容。

非常感谢!

其他信息:

所有结果都显示在同一页面中，这意味着所有 div 具有相同的名称。

我已将 div 代码更改为:

echo "<div id='$dados[id]'  style='display:none;' class='answer_list' >";

$dados[id] returns me the id of the data in my db.

I want to change:

document.getElementById('hiddenDiv') to something like document.getElementById('$dados[id') <-- Shows only the last div.

可以吗？

结果来自:

while ($dados = mysql_fetch_array($query))

Answer 1

试试这个:

<script type='text/javascript'>
    function showDiv() {
        if (document.getElementById('hiddenDiv').style.display == 'block') {
            document.getElementById('hiddenDiv').style.display = 'none';
        } else {
            document.getElementById('hiddenDiv').style.display = 'block';
        }
    }
</script>
<div id="hiddenDiv"  style="display:none;" class="answer_list" >
    WELCOME
</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />

一个函数即可完成所有操作。话虽如此，jQuery toggle真的很不错。