Question

页面上有多个div元素。除了单击它们时，我想全部隐藏它们。单击时，它们应该显示。我遵循了在SO上找到的许多示例。但是，如果没有多次单击，我似乎无法在Wordpress页面上使它们中的任何一个起作用。我究竟做错了什么。

仅供参考，下面的代码与看到的完全一样，放置在Wordpress页面中。

function toggle_visibility(id) {
  var e = document.getElementById(id);
  if (e.style.display == 'block')
    e.style.display = 'none';
  else
    e.style.display = 'block';
}

<strong><a href="#"  onclick="toggle_visibility('list_one');">List One</a></strong>
<div id="list_one" style="display: none">
  <ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
    <li>Item Five</li>
  </ul>
</div>

<strong><a href="#"  onclick="toggle_visibility('list_two');">List Two</a></strong>
<div id="list_two" style="display: none">
  <ul>
    <li>Item Uno</li>
    <li>Item Dos</li>
    <li>Item Tre</li>
  </ul>
</div>

Answer 1

您要一次单击隐藏所有div标签吗？那么你可以试试这个

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#list_one,#list_two {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color:#C5C5C3 ;
  margin-top: 20px;
}
</style>
</head>
<body>

<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

<button onclick="myFunction()">Try it</button>

<div id="list_one">
<ul>
    <li>Item Uno</li>
    <li>Item Dos</li>
    <li>Item Tre</li>
</ul>
</div>

<div id="list_two">
<ul>
    <li>Item Uno</li>
    <li>Item Dos</li>
    <li>Item Tre</li>
</ul>
</div>

<script>

function myFunction() {

var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
    if (divs[i].style.display === "none") {
    divs[i].style.display = "block";
  } else {
    divs[i].style.display = "none";
  }       
}
}
</script>

</body>
</html>

对于单个div，请尝试以下javascript

function myFunction() {
  var x = document.getElementById("list_one");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

Answer 2

您可以尝试：

function toggle_visibility(id) {
  var e = document.getElementById(id);
  e.style.display = e.style.display == 'none' ? '' : 'none';
}

但是，正如先前的评论者所说，您的代码确实有效。

如果您使用的是jQuery，则可以：

$('#list_one').toggle();

如何在WordPress页面中按ID隐藏和显示div元素？

2 个答案: