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

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

1 голос
/ 25 марта 2019

У меня есть несколько элементов 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>

Ответы [ 2 ]

0 голосов
/ 25 марта 2019

Вы можете попробовать: 

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

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

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

$('#list_one').toggle();
0 голосов
/ 25 марта 2019

вы хотите скрыть все теги 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";
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...