使用 JavaScript 显示/隐藏 Div 内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13498512/
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
Showing / Hiding Div Content with JavaScript
提问by codeChris
I need a little help here. I am trying to show / hide div content on select of a jump menu. I can't seem to get the code to work. Here is my code:
我需要一点帮助。我试图在选择跳转菜单时显示/隐藏 div 内容。我似乎无法让代码工作。这是我的代码：
JS:
function toggleOther(chosen){
if (chosen == 'cat') {
document.getElementById('categories').style.visibility = 'visible';
} else {
document.getElementById('categories').style.visibility = 'hidden';
document.myform.other.value = '';
}
And my page:
<td class="formlabel" nowrap="nowrap"><form name="Users">Users:</td>
<td nowrap="nowrap" class="formlabel"><select name="fieldname" size="1" onchange="toggleOther( document.myform.values.options[document.myform.values.selectedIndex ].value );" class="select" >
<option selected="selected">Choose</option>
<option>All Users</option>
<option value="cat">User 1</option>
<option value="cat">User 2</option>
<option value="cat">User 3</option>
<option value="cat">User 4</option>
<option value="cat">User 5</option>
</select></td>
<div style="opacity: 0.3; background: #fff; display:none">
<td width="380" valign="top" class="center">
<table width="360" class="imagetable" cellpadding="0" cellspacing="0" id="categories">
<tr>
<th colspan="2" nowrap="nowrap" class="reportname">Categories</th>
</tr>
<tr>
<td class="formlabel" nowrap="nowrap"><form name="Exams">Exams</td>
<td nowrap="nowrap" class="formlabel"><select name="fieldname" size="1" class="select">
<option value="#" selected="selected" target="_blank">Choose</option>
<option value="">All Exams</option>
<option value="">Exam 1</option>
<option value="">Exam 2</option>
<option value="">Exam 3</option>
<option value="">Exam 4</option>
<option value="">Exam 5</option>
</select></td>
</tr>
</form>
<tr>
<td nowrap="nowrap" class="formlabel">Include Categories</td>
<td nowrap="nowrap" class="formlabel"><input type="text" name="textfield2" id="textfield2" class="fields" size="4" />or more items assigned</td>
</tr>
<tr>
<td class="formlabel" nowrap="nowrap">Display Categories</td>
<td nowrap="nowrap" class="formlabel">that appear
<input type="text" name="textfield3" id="textfield3" class="fields" size="4" />or more exams</td>
</tr>
</table>
Any help here? I cannot seem to get it to work...
这里有什么帮助吗？我似乎无法让它工作......
采纳答案by Mahmoud Farahat
To hide:
隐藏：
document.getElementById('categories').style.display="none"
To show:
以显示：
document.getElementById('categories').style.display=""
回答by Jorge Zuverza
It is better to use the jquery's .toggle() method. You save time and it is nicer since you can do effects
最好使用 jquery 的 .toggle() 方法。您可以节省时间并且更好，因为您可以制作效果
you could just do
你可以做
$(#categories).toggle(); //to show or hide the id = "categories"
