js点击同一个按钮显示和隐藏

可以使用以下代码实现：

HTML部分：

<button id="btn">点击我显示/隐藏内容</button>
<div id="content">这是要显示/隐藏的内容</div>

JavaScript部分：

var btn = document.getElementById("btn");
var content = document.getElementById("content");

btn.addEventListener("click", function(){
  if(content.style.display === "none"){
    content.style.display = "block";
  } else {
    content.style.display = "none";
  }
});

这段代码中，我们获取到了按钮和要隐藏/显示的内容的 DOM 对象，并为按钮添加了一个点击事件监听器。在点击事件中，我们判断内容的 display 属性是否为 none，如果是，则将其改为 block，显示出来；如果不是，则将其改为 none，隐藏起来。这样，每次点击按钮，都可以实现内容的显示与隐藏。

相关问题

通过一个点击事件让他显示和隐藏

你可以通过JavaScript来实现这个功能。首先，你需要给触发显示和隐藏的元素添加一个点击事件监听器。在监听器内部，你可以通过修改元素的样式来实现显示和隐藏。

以下是一个示例代码：

HTML:

<button id="toggleButton">点击我显示/隐藏</button>
<div id="content" style="display:none">
  这是要显示和隐藏的内容
</div>

JavaScript:

const toggleButton = document.getElementById('toggleButton');
const content = document.getElementById('content');

toggleButton.addEventListener('click', () => {
  if (content.style.display === 'none') {
    content.style.display = 'block';
  } else {
    content.style.display = 'none';
  }
});

在这个示例中，我们首先获取了要触发显示和隐藏的按钮和要显示和隐藏的内容。然后，我们给按钮添加了一个点击事件监听器。在监听器内部，我们检查内容的样式是否为 `none`，如果是，则将其样式设置为 `block`，否则将其样式设置为 `none`。这样就可以通过点击按钮来显示和隐藏内容了。

点击按钮显示隐藏div

要实现点击按钮显示隐藏div的效果，你可以使用JavaScript来操作DOM元素。以下是一种简单的方式来实现这个功能：

首先，在HTML中创建一个按钮和一个要隐藏的div元素：

<button id="toggleButton">点击按钮</button>
<div id="hiddenDiv" style="display: none;">这是要隐藏的内容。</div>

然后，在JavaScript中监听按钮的点击事件，并根据当前div的显示状态来切换其显示与隐藏：

var button = document.getElementById("toggleButton");
var hiddenDiv = document.getElementById("hiddenDiv");

button.addEventListener("click", function() {
  if (hiddenDiv.style.display === "none") {
    hiddenDiv.style.display = "block";
  } else {
    hiddenDiv.style.display = "none";
  }
});

以上代码中，我们通过getElementById方法获取按钮和div元素的引用，并使用addEventListener方法为按钮添加一个点击事件监听器。在事件处理函数中，我们检查当前div的display属性值，如果是"none"（表示隐藏），则将其设置为"block"（表示显示），反之亦然。

这样，当按钮被点击时，div的显示状态就会切换，实现了点击按钮显示隐藏div的效果。