javascript 使用 jscript 显示/隐藏 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14201114/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show / Hide div with jscript
提问by Henrique Souza
I looked all arround the site and i could not find an answer that is what i want. Perhaps my knowledge is just too little for this but im trying to learn more and more.
我环顾了整个网站，但找不到我想要的答案。也许我的知识太少了，但我正在努力学习越来越多。
Here is the thing, i have this website with several movies and after making a search in my db i return only the essential data for the user with the movies that correspond to the search parameter, the rest of the data i want to put in a div with the option to SHOW and HIDE the same div.
事情是这样的，我在这个网站上有几部电影，在我的数据库中进行搜索后，我只返回用户的基本数据，其中包含与搜索参数对应的电影，其余数据我想放入div 带有显示和隐藏相同 div 的选项。
That is what i have so far:
这就是我到目前为止所拥有的：
<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()" />
Detail: Im printing everything with php echo.
详细信息：我用 php echo 打印所有内容。
Thank you very much!
非常感谢你！
Additional info:
附加信息：
All the result are shown in the same page, wich means all the divs have the same name.
所有结果都显示在同一页面中，这意味着所有 div 都具有相同的名称。
I have change my div code to:
我已将我的 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.
Can it be done?
可以做到吗？
Result comes from:
结果来自：
while ($dados = mysql_fetch_array($query))
采纳答案by SeanWM
Try this:
试试这个：
<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()" />
One function does all. That being said, jQuery toggleis really nice.
一个功能完成所有工作。话虽如此，jQuery切换真的很好。
回答by OMG
Sample Javascript + Html:
示例 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>
Note: the term 'toggle' represents show / hide an element.
注意：术语“切换”表示显示/隐藏元素。
Also Here are some other good examples:
这里还有一些其他很好的例子：
http://csscreator.com/node/708#xcomment-3123
http://csscreator.com/node/708#xcomment-3123
http://psoug.org/snippet/Javascript-Smooth-Div-ShowHide_236.htm
http://psoug.org/snippet/Javascript-Smooth-Div-ShowHide_236.htm
回答by shota
<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>`
it's mine
这是我的
回答by Eugen Rieck
<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()" />
or use a framework, such as Dojo (or even jQuery, if it absolutely can't be helped)
或使用框架，例如 Dojo（甚至 jQuery，如果它绝对无法帮助）
