Почему моя кнопка скрытия показа нуждается в двойном щелчке в первый раз - PullRequest
Новая
       33

Почему моя кнопка скрытия показа нуждается в двойном щелчке в первый раз

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

У меня есть кнопка показать / скрыть на моем веб-сайте.Это работает, но в первый раз пользователю нужно дважды щелкнуть по нему, как будто переключатель установлен в положение «скрыть», но элемент уже скрыт ...

Я бы хотел отредактировать свой код таккнопка показывает элемент одним щелчком мыши в первый раз

Я новичок в javascript, поэтому я не знаю, как это изменить.

Спасибо 

function showhidemenu() {
  var x = document.getElementById("menu");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
#menu {
  background: rgba(0, 0, 0, 0);
  position: absolute;
  z-index: 1;
  top: 60px;
  right: 50px;
  width: 150px;
  font-family: 'Open Sans', sans-serif;
  display: none;
}
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>

Ответы [ 3 ]

2 голосов
/ 09 марта 2019

Чтобы достичь ожидаемого результата, используйте нижеприведенную опцию первоначальной проверки отображения, которое будет пустым, если оно не встроено 

x.style.display === "none" || x.style.display === ""

Пожалуйста, обратитесь к этой ссылке для более подробной информации - Почему element.style всегда возвращаетпусто при предоставлении стилей в CSS? 

function showhidemenu() {
  var x = document.getElementById("menu");
  if (x.style.display === "none" || x.style.display === "") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
#menu {
  background: rgba(0, 0, 0, 0);
  position: absolute;
  z-index: 1;
  top: 60px;
  right: 50px;
  width: 150px;
  font-family: 'Open Sans', sans-serif;
  display: none;
}
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>
0 голосов
/ 09 марта 2019

Потому что изначально x.style.display === "none" равен false и переходит в блок else.
Для этой цели вы можете использовать троичный оператор . 

function showhidemenu() {
  var x = document.getElementById("menu");
  x.style.display = !x.style.display ? 'block' : '';
}
#menu {
  background: rgba(0, 0, 0, 0);
  position: absolute;
  z-index: 1;
  top: 60px;
  right: 50px;
  width: 150px;
  font-family: 'Open Sans', sans-serif;
  display: none;
}
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>

Код работает, потому что '' является ложным значением

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

Вы должны проверить свое утверждение «если / тогда». Вы проверяете неправильный заказ. 

function showhidemenu() {
  var x = document.getElementById("menu");
  if (x.style.display == "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
#menu {
  background: rgba(0, 0, 0, 0);
  position: absolute;
  z-index: 1;
  top: 60px;
  right: 50px;
  width: 150px;
  font-family: 'Open Sans', sans-serif;
  display: none;
}
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>
...