如何在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