Html 如何使用 onclick 显示和隐藏简单的 <ol> 列表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17561093/
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
How to show and hide a simple <ol> list with onclick?
提问by Ericson Willians
Considering the following paragraph and list:
考虑以下段落和列表：
<p id = "list1" onclick = "openList1()">List of Items</p>
<ol>
<li><a href = "/exampleFolder/file1.txt">List Item 1</a></li>
<li><a href = "/exampleFolder/file2.txt">List Item 2</a></li>
<li><a href = "/exampleFolder/file3.txt">List Item 3</a></li>
<li><a href = "/exampleFolder/file4.txt">List Item 4</a></li>
<li><a href = "/exampleFolder/file5.txt">List Item 5</a></li>
</ol>
How can I show and hide this entire list with Javascript?
如何使用 Javascript 显示和隐藏整个列表？
<script>
function openList1() {
...
}
</script>
I thank you for the attention!
我感谢您的关注！
回答by mohkhan
You can give an id to the OLlist.
您可以为OL列表提供一个 id 。
<p id = "list1" onclick = "openList1()">List of Items</p>
<ol id="ollist">
<li><a href = "/exampleFolder/file1.txt">List Item 1</a></li>
<li><a href = "/exampleFolder/file2.txt">List Item 2</a></li>
<li><a href = "/exampleFolder/file3.txt">List Item 3</a></li>
<li><a href = "/exampleFolder/file4.txt">List Item 4</a></li>
<li><a href = "/exampleFolder/file5.txt">List Item 5</a></li>
</ol>
And then in your javascript you can toggle it like this...
然后在你的javascript中你可以像这样切换它......
<script>
function openList1() {
var list = document.getElementById("ollist");
if (list.style.display == "none"){
list.style.display = "block";
}else{
list.style.display = "none";
}
}
</script>
回答by TGH
<script>
function openList1() {
$("ol").toggle();
}
</script>
Can you use JQuery? If so, try the above
你可以使用 JQuery 吗？如果是这样，请尝试以上
回答by DevlshOne
var myList = document.getElementsByTagName('ol');
myList[0].style.visibility = 'hidden'; // 'visible'
回答by LanceHub
var ol = document.getElementByTagName('ol');
ol.style.display='none';
回答by jh314
First you can modify your list:
首先，您可以修改您的列表：
<ol id="list" style="display: none;">
You can write a function to show:
您可以编写一个函数来显示：
function showStuff(id) {
document.getElementById(id).style.display = 'block';
}
// call function to show your list
showStuff("list");
To hide your element:
要隐藏您的元素：
function hideStuff(id) {
document.getElementById(id).style.display = 'none';
}
// call function to hide your list
hideStuff("list");
