如何使用 onclick 显示和隐藏一个简单的 <ol> 列表？答案

【问题标题】：How to show and hide a simple <ol> list with onclick?如何使用 onclick 显示和隐藏一个简单的 <ol> 列表？
【发布时间】：2013-07-07 19:39:42
【问题描述】：

考虑以下段落和列表：

<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>

如何使用 Javascript 显示和隐藏整个列表？

<script>
function openList1() {
...
}
</script>

感谢您的关注！

【问题讨论】：

谷歌“显示和隐藏一个 div”，你会看到很多方法。

标签： javascript html list onclick show

【解决方案1】：

您可以为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>

然后在你的javascript中你可以像这样切换它......

<script>
function openList1() {
    var list = document.getElementById("ollist");

    if (list.style.display == "none"){
        list.style.display = "block";
    }else{
        list.style.display = "none";
    }
}
</script>

【讨论】：

【解决方案2】：

var myList = document.getElementsByTagName('ol');
myList[0].style.visibility = 'hidden'; // 'visible'

【讨论】：

【解决方案3】：

<script>
function openList1() {
$("ol").toggle();
}
</script>

你会使用 JQuery 吗？如果是这样，请尝试上述方法

【讨论】：

【解决方案4】：

首先你可以修改你的列表：

<ol id="list" style="display: none;">

你可以写一个函数来显示：

function showStuff(id) {
    document.getElementById(id).style.display = 'block';
}
// call function to show your list
showStuff("list");

隐藏你的元素：

function hideStuff(id) {
    document.getElementById(id).style.display = 'none';
}
// call function to hide your list
hideStuff("list");

【讨论】：

【解决方案5】：

var ol = document.getElementByTagName('ol');
 ol.style.display='none';

【讨论】：