显示/隐藏 div 的按钮必须按两次答案

【问题标题】：Button to show/hide div has to be pressed twice显示/隐藏 div 的按钮必须按两次
【发布时间】：2017-12-03 21:29:31
【问题描述】：

我的目标：在页面加载时隐藏我的 div，并使用仅使用 HTML/CSS/JavaScript 的按钮显示/隐藏 div。

我已经在 HTML 和 JavaScript 中设置了一个按钮来显示/隐藏我的 div，当 div 在页面加载时可见并且没有使用 CSS 隐藏时，它的效果很好。当我使用 CSS 隐藏 div 时 display: none; div 在页面加载时隐藏，但必须单击按钮两次才能使 div 可见。

HTML：

  <button class="btn btn-link" id="btnLink" onclick="hideLink()">Hide 
  Content</button> <br><br>
  <div id="myLink">
  <h1>Div content here</h1>
  </div>

CSS：

#myLink {显示：无；}

JavaScript：

function hideLink() {
var x = document.getElementById('myLink');
var b = document.getElementById('btnLink');


if (x.style.display === 'none') {
    x.style.display = 'block';
    b.childNodes[0].nodeValue="Hide Content";

} else {
    x.style.display = 'none';
    b.childNodes[0].nodeValue="Show Content";
}
}

【问题讨论】：

如果你 console.log(x.style.display) 在页面加载时使用 CSS 隐藏，那么值是多少？
我不确定如何检查值？
第一次点击btn时的div，在display中没有设置任何值，所以调用x.style.display既不是block也不是none，问题应该出在这里
CSS 块 #myLink {display: none;} 表示该元素是隐藏的......但是，它没有内联样式 - 因此第一次点击将运行 else 块......改变你的逻辑，检查if (display !== 'block') 而不是
更改逻辑有效，但现在不会隐藏 div....

标签： javascript html button

【解决方案1】：

您应该检查!== 'block' 而不是=== 'none'

当我们在 css 中使用 none 时，值 x.style.display 设置为空白，因为 css 选择器比元素获得 none 属性（至少这是我所理解的）。所以检查=== none实际上比较它会空白并返回false（x.style.display = ''）。

现在，一旦我们使用 JS 将值设置为 block，元素的 style.display 属性就有一个我们可以比较的值。

function hideLink() {
  var x = document.getElementById('myLink');
  var b = document.getElementById('btnLink');


  if (x.style.display !== 'block') {
    x.style.display = 'block';
    b.childNodes[0].nodeValue = "Hide Content";

  } else {
    x.style.display = 'none';
    b.childNodes[0].nodeValue = "Show Content";
  }
}

#myLink {
  display: none;
}

<button class="btn btn-link" id="btnLink" onclick="hideLink()">
Show Content
</button>
<br><br>
<div id="myLink">
  <h1>Div content here</h1>
</div>

【讨论】：

这是什么魔法，!==？这如何转化为少点击一次？
@AlexanderMcNulty 我已经更新了答案以描述会发生什么。

【解决方案2】：

第一次单击按钮时，元素本身没有专门设置显示样式。在您的第一个 if/then 之后，它确实如此。

请看这里： http://plnkr.co/edit/4peCJS1vhJskexqdLdKL?p=preview

var t = document.getElementById('output').innerText;
document.getElementById('output').innerText = JSON.stringify(x.outerHTML);

【讨论】：

【解决方案3】：

用另一个如果...更正它...

function hideLink() {
var x = document.getElementById('myLink');
var b = document.getElementById('btnLink');

if (x.style.display === ''){
    x.style.display = 'none';
}

if (x.style.display === 'none') {
    x.style.display = 'block';
    b.childNodes[0].nodeValue="Hide Sitemap Section";

} else {
    x.style.display = 'none';
    b.childNodes[0].nodeValue="Show Sitemap Section";
}
}

【讨论】：