js实现点击展开隐藏效果（实例代码）

在我们的网页设计中，经常会有点击展开隐藏效果的需求。比如一个列表页默认只显示前几个条目，点击“显示更多”按钮后，会展开剩余的条目。这种效果可以通过 JavaScript 实现。

下面，我将介绍一种简单的实现方式。

1. HTML 结构

我们首先需要在 HTML 中，创建要展开隐藏的内容和点击按钮的元素。以下是一个示例代码：

<div class="wrapper">
  <h2>题目</h2>
  <div class="content">
    <p>这里是要展开的内容</p>
    <p>这里是要展开的内容</p>
    <p>这里是要展开的内容</p>
    <p>这里是要展开的内容</p>
    <p>这里是要展开的内容</p>
    <p>这里是要展开的内容</p>
    <p>这里是要展开的内容</p>
  </div>
  <button class="toggle-button">显示更多</button>
</div>

在上面的代码中，我们创建了一个 wrapper 的容器元素，里面包含了一个 h2 标题和 content 的内容容器。内容容器里面有多个要展开的内容 p，同时，我们还创建了一个 toggle-button 按钮，用于触发展开/收起内容的效果。

2. CSS

我们需要设置好展开前和展开后的样式，以及控制要展开的内容显示/隐藏的样式。以下是示例 CSS 代码：

.wrapper {
  max-height: 200px;
  overflow: hidden;
}

.content {
  margin: 10px 0;
  display: none;
}

.button {
  display: block;
  margin-top: 10px;
}

在上面的代码中，我们在 wrapper 容器上设置了最大高度和隐藏溢出内容。在 content 容器上设置了默认的 display 为 none，并且在按钮上添加了一些基本的样式。

3. JavaScript

现在我们来到了最重要的 JavaScript 部分。我们需要添加一个监听器，在按钮被点击时，切换要展开的内容的 display 属性。

代码如下：

// 获取要展示的内容
var content = document.querySelector('.content');

// 获取按钮元素
var button = document.querySelector('.toggle-button');

// 在按钮上添加监听器
button.addEventListener('click', function() {
  // 如果内容的 display 属性为 "none"，则点击按钮后，修改它为 "block"，并修改按钮的文本
  if (content.style.display === "none") {
    content.style.display = "block";
    button.textContent = "收起";
  } 
  // 如果内容的 display 属性为 "block"，则点击按钮后，修改它为 "none"，并修改按钮的文本
  else {
    content.style.display = "none";
    button.textContent = "显示更多";
  }
});

在上面的代码中，我们首先使用 querySelector 方法获取到了要展开的内容和按钮元素。然后，我们在按钮元素上添加了一个 click 监听器，当按钮被点击时，会执行我们的回调函数。

回调函数里面，我们首先检查要展开的内容的 display 属性是否为 “none”。如果是，则将其更改为 “block”，即显示内容，并将按钮的文本修改为 “收起”。

如果 display 属性已经被修改为 “block”，则将其恢复为 “none”，即隐藏内容，同时也修改按钮文本为 “显示更多”。

综上所述，这样就实现了一个点击展开隐藏效果，用户可通过单击按钮实现内容的展开和收起。