时间戳

首页 > 解决方案 > 如何在 WordPress 页面中按 id 隐藏和显示 div 元素？

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

问题描述

我的页面上有许多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>

标签： javascripthtmlwordpress

解决方案

你可以试试：

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

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

如果你使用 jQuery，你可以这样做：

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

推荐阅读