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

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 个解决方案

解决方案1
0 已采纳 2019-03-25 14:06:41

解决方案2
0 2019-03-25 14:09:40

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

问题描述

2 个解决方案

解决方案1 0 已采纳 2019-03-25 14:06:41

解决方案2 0 2019-03-25 14:09:40

解决方案1
0 已采纳 2019-03-25 14:06:41

解决方案2
0 2019-03-25 14:09:40