Question

我的网站上有此“显示/隐藏”按钮。它可以工作，但是第一次用户需要双击它，就好像开关设置为“ hide”但该元素已被隐藏...

我想编辑我的代码，以便第一次单击该按钮即可显示元素

我是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>

Answer 1

要获得预期结果，请使用下面的检查显示选项，如果不是内联的，则为空

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

请参考此链接以获取更多详细信息-Why element.style always return empty while providing styles in 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>

Answer 2

您需要检查“ if / then”语句。您正在检查错误的订单。

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>

Answer 3

因为最初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>

代码有效，因为''是虚假的值

为什么我的“显示隐藏”按钮需要首次双击

3 个答案: