如何显示和隐藏简单的< ol>列表与onclick？

问题描述

考虑以下段落和列表：

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>

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

How can I show and hide this entire list with Javascript?

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

感谢您的关注！

I thank you for the attention!

推荐答案

您可以为 OL 列表指定一个ID。

You can give an id to the OL list.

<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中，您可以像这样切换...

And then in your javascript you can toggle it like this...

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

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

这篇关于如何显示和隐藏简单的< ol>列表与onclick？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！