Question

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

我已经在HTML和JavaScript中设置了一个按钮来显示/隐藏我的div，当div在页面加载时可见并且不使用CSS隐藏时，该按钮效果很好。当我使用CSS display隐藏div时：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 {display：none;}

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";
}
}

Answer 1

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

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

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

＆＃13;

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";
  }
}

＆＃13;

#myLink {
  display: none;
}

＆＃13;

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

＆＃13;

Answer 2

第一次单击该按钮时，元素本身没有专门具有显示集的样式。在你的第一个if / then之后，那就是。

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

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

Answer 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";
}
}

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

3 个答案: