2

考虑以下段落和列表：

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

我感谢您的关注！

4

5 回答 5

6

你可以给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>
于 2013-07-10T01:39:08.870 回答
2 
var myList = document.getElementsByTagName('ol');
myList[0].style.visibility = 'hidden'; // 'visible'
于 2013-07-10T01:38:03.587 回答
2 
<script>
function openList1() {
$("ol").toggle();
}
</script>

可以用 JQuery 吗？如果是这样，试试上面的

于 2013-07-10T01:39:31.253 回答
1 
var ol = document.getElementByTagName('ol');
 ol.style.display='none';
于 2013-07-10T01:38:53.493 回答
1

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

<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");
于 2013-07-10T01:39:40.140 回答