JS 点击显示再点击隐藏|极客笔记

JS 点击显示再点击隐藏

在网页开发中，经常需要实现点击按钮显示或隐藏特定内容的功能。本文将介绍如何使用 JavaScript 实现点击按钮显示内容，再点击隐藏内容的效果。

HTML 结构

首先，我们需要在 HTML 中创建一个按钮和一个需要显示或隐藏的内容区域。可以参考以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击显示再点击隐藏</title>
</head>
<body>
    <button id="toggleButton">显示/隐藏内容</button>
    <div id="content" style="display:none;">
        这是需要显示或隐藏的内容。
    </div>

    <script src="main.js"></script>
</body>
</html>

在上面的代码中，我们创建了一个按钮元素和一个 div 元素作为内容区域，并设置了一个 id 以便在 JavaScript 中操作。内容区域的初始样式为 display:none;，表示默认情况下是隐藏的。

JavaScript 代码

接下来，我们需要编写 JavaScript 代码来实现点击按钮显示或隐藏内容的功能。可以参考以下代码：

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

let isContentVisible = false;

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

在上面的代码中，我们首先通过 getElementById 方法获取按钮和内容区域的引用，并声明一个变量 isContentVisible 来表示内容是否可见。然后，我们给按钮添加一个点击事件监听器，当按钮被点击时，切换内容区域的显示状态。