Как скрыть и показать элемент div по идентификатору на странице WordPress?

#javascript #html #wordpress

#javascript #HTML #wordpress

Вопрос:

На моей странице есть несколько 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>

1. Код работает, возможно, он конфликтует с кодом WordPress: jsfiddle.net/z_acharki/1hq2o5yz

2. Более короткая, плавная и беспорядочная версия: jsfiddle.net/omerowitz/xz2ojt6r/9

3. спасибо @ZakariaAcharki, это, скорее всего, так. На странице нет ничего, кроме текста, прежде чем я введу приведенный выше код, однако это должен быть основной код, код шаблона или установленные плагины для остальной части сайта

4. «Кажется, я не могу заставить ни один из них работать на моей странице WordPress» вы говорите о своей собственной пользовательской странице (PHP) или просто используете редактор WP для добавления JS? Если редактор просматривает ваш исходный код в браузере. Насколько я помню, редактор изменит / удалит любой добавленный JS. Не уверен насчет нового редактора Gutenberg.

Ответ №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";
  }
}

Ответ №2:

Вы могли бы попробовать:

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

Однако, как сказал предыдущий комментатор, ваш код действительно работает.

Если вы используете jQuery, вы могли бы сделать:

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

1. Ваш js-код, по сути, то же самое. Вы переработали его, чтобы исключить оператор long if. Кроме этого, вы ничего не сделали, чтобы решить проблему, связанную с моим кодом, работающим на странице WordPress