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非常好。

Answer 2

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

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

或者使用一个框架，比如Dojo（甚至是jQuery，如果它绝对无法帮助的话）

Answer 3

示例Javascript + Html：

<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 = "show";
    } else {
        ele.style.display = "block";
        text.innerHTML = "hide";
    }
} 
</script>

<a id="displayText" href="javascript:toggle();">show</a> <== click Here
<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>

注意：术语“切换”表示显示/隐藏元素。

此外还有其他一些很好的例子：

http://csscreator.com/node/708#xcomment-3123

http://psoug.org/snippet/Javascript-Smooth-Div-ShowHide_236.htm

Answer 4

<script type='text/javascript'>
function showadve() {
    if (document.getElementById('hiddenadve').style.display == 'none') {
        document.getElementById('hiddenadve').style.display = 'block';
    } else {
        document.getElementById('hiddenadve').style.display = 'none';
    }
}
</script>
<div id="hiddenadve" class="answer_list" >
    WELCOME
</div>
<input type="button" name="answer" value="Show Div" onclick="showadve()" />
<a href="#" onclick="showadve()">all close</a>`

这是我的

用jscript显示/隐藏div

4 个答案: