最初隐藏切换 div

Question

我最初试图隐藏 MyDiv。然后它会在点击时显示，并带有切换功能。但是，我不能一开始就隐藏它。

<button onclick="myFunction()">Click Me</button>

这是我的 DIV 元素。

<script>function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
    x.style.display = 'block';
} else {
    x.style.display = 'none';
}

}

Answer 1

最初尝试使用 CSS 隐藏它

<div id="myDIV" style="display: none;">Some DIV content</div>

Answer 2

这有效！

var x = document.getElementById('myDIV');
function myFunction() {
    if (x.style.display === 'block') {
        x.style.display = 'none';
    } else {
        x.style.display = 'block';
    }
}

#myDIV{
  display: none;
}

<button onclick="myFunction()">Click me</button>

<div id="myDIV">Hello world!</div>

或者你可以这样做（区别不大）：

var x = document.getElementById('myDIV');
function myFunction() {
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}

<button onclick="myFunction()">Click me</button>

<div id="myDIV" style='display: none'>Hello world!</div>

编辑：

这样您就可以将 div 的 ID 发送到函数：

function myFunction(id) {
  var x = document.getElementById(id);
  if (x.style.display === 'none') {
    x.style.display = 'block';
  } else {
    x.style.display = 'none';
  }
}

<button onclick="myFunction('myDIV')">Click me</button>
<div id="myDIV" style='display: none'>Hello world!</div>

<br />

<button onclick="myFunction('myDIV2')">Click me</button>
<div id="myDIV2" style='display: none'>Hello world!</div>

Answer 3

这里有一个更好的方法：

CSS

.hide{
    display: none;
}

HTML

<button onclick="myFunction()">Click Me</button>
<div id="my_div" class="hide"></div>

JS

function myFunction() {
    var myDiv = document.getElementById('my_div');
    myDiv.classList.toggle("hide");
}

最初隐藏切换 div

Initially hide toggle div

javascript

show

toggle

hide