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

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

javascript html wordpress

Javascript 如何在WordPress页面中按id隐藏和显示div元素？,javascript,html,wordpress,Javascript,Html,Wordpress,我的页面上有许多div元素。我想将它们全部隐藏，但单击时除外。单击时，它们应显示。我已经遵循了一些这样的例子。然而，如果没有多次点击，我似乎无法让它们中的任何一个在我的wordpress页面上工作。我做错了什么仅供参考，下面的代码完全如图所示放置在Wordpress页面中功能切换\u可见性（id）{ var e=document.getElementById（id）；如果（e.style.display=='block'） e、 style.display='none'；其他的 e、

我的页面上有许多

div

元素。我想将它们全部隐藏，但单击时除外。单击时，它们应显示。我已经遵循了一些这样的例子。然而，如果没有多次点击，我似乎无法让它们中的任何一个在我的wordpress页面上工作。我做错了什么

仅供参考，下面的代码完全如图所示放置在Wordpress页面中

功能切换\u可见性（id）{
var e=document.getElementById（id）；
如果（e.style.display=='block'）
e、 style.display='none'；
其他的
e、 style.display='block'；
}



项目一
项目二
项目三
项目四
项目五



项目Uno
项目待办事项
项目Tre

要在单击时隐藏所有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标记？那你可以试试这个

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

你可以试试：

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

然而，正如前面的一位评论者所说，您的代码确实可以工作

如果使用jQuery，可以执行以下操作：

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

你可以试试：

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

然而，正如前面的一位评论者所说，您的代码确实可以工作

如果使用jQuery，可以执行以下操作：

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

代码正在运行，它可能与WordPress代码冲突：更短、更流畅、更凌乱的版本：谢谢@ZakariaAcharki这似乎是最有可能的情况。在我输入上面的代码之前，页面上只有文本，但是，它必须是核心代码、模板代码，或者站点其余部分的已安装插件“我似乎无法让它们中的任何一个在我的wordpress页面上工作”你是在说你自己的自定义（PHP）页面，还是仅仅使用WP Editor添加你的JS？如果编辑器在浏览器上查看源代码。回想起来，编辑器将损坏/删除添加的任何JS。不确定新的古腾堡编辑器。代码正在运行，它可能与WordPress代码冲突：更短、更流畅、更凌乱的版本：谢谢@ZakariaAcharki这似乎是最有可能的情况。在我输入上面的代码之前，页面上只有文本，但是，它必须是核心代码、模板代码，或者站点其余部分的已安装插件“我似乎无法让它们中的任何一个在我的wordpress页面上工作”你是在说你自己的自定义（PHP）页面，还是仅仅使用WP Editor添加你的JS？如果编辑器在浏览器上查看源代码。回想起来，编辑器将损坏/删除添加的任何JS。不确定新的Gutenberg编辑器。你的js代码基本上是一样的。您对其进行了重构，以消除长if语句。除此之外，你没有做任何事情来解决我在wordpress页面上的代码问题。你的js代码本质上是一样的。您对其进行了重构，以消除长if语句。除此之外，您没有做任何事情来解决我在wordpress页面中使用代码的问题