切换 - 隐藏和显示

Question

我将复制了w3schools的隐藏和显示切换，但我希望它被反转，这样额外的信息就不会从一开始就存在，而是通过按钮显示。

以下是代码：

HTML:

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

<div id="myDIV">
     This is my DIV element.
</div>

js:

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

任何帮助都将不胜感激！

- easyquestions

---

你是否只是想让#myDIV元素最初具有display: none（使其隐藏），而不是在开始时显示？此外，我在这里看不到任何jQuery，您不需要添加标签。 - Spencer Wieczorek

我在你的代码中没有看到任何jQuery，并且你发布的内容似乎运行良好。你在浏览器控制台中是否有任何错误？ - j08691

是的，听起来没错 @SpencerWieczorek - easyquestions

@j08691 JavaScript，不是jQuery我的错 - easyquestions

在您的JS脚本顶部，您可以直接使用以下代码：document.getElementById('myDIV').style.display = "none";将其设置为从一开始就不显示。 - Jack Parkinson

Answer 1

解决方法很简单：只需隐藏该

元素。

<div id="myDIV" style="display:none"> 
    This is my DIV element. 
</div>

更好的方法是将其隐藏在CSS中：

---

即将到来

<div id="myDIV"> 
    This is my DIV element.
</div>

并且在你的CSS中：

#myDIV {
    display: none;
}

- techfly

Answer 2

我会使用实用的CSS类来完成这个任务：

.is--hidden {
    display: none;
} 

然后您可以把它默认应用到元素上：

<button class="mybutton">Click Me</button>
<div class="example is--hidden">Some Text</div>

并通过jQuery切换它：

$('.mybutton').on('click', function () {
    $('.example').toggleClass('is--hidden');
})

调试工具：https://jsfiddle.net/tL5mj54n/

- mark_c

Answer 3

您只需要在您的代码中添加 display : none。

function myFunction() {
var x = document.getElementById('myDIV');
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;">
     This is my DIV element.
</div>

- The_Outsider

Answer 4

不需要改变样式或HTML。您的JavaScript应该如下：

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

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

第一个函数运行并隐藏您的div，第二个函数响应点击并切换div。

- Ilya Kushlianski

Answer 5

这是一个示例代码片段。

将样式设置为隐藏元素（display:none），从一开始就隐藏。点击时切换显示。

document.getElementById('myButton').onclick = function() {
  var x = document.getElementById('myDIV');
  x.style.display = x.style.display === 'none' ? 'block' : 'none';
};

<button id='myButton' >Click Me</button>

<div id="myDIV" style="display:none">
     This is my DIV element.
</div>

- Matt