【JavaScript】原生内容的展开/收起

在JavaScript中，原生内容的展开/收起功能通常通过HTML、CSS以及一些简单的JavaScript来实现。这通常涉及到以下几个步骤：

1. HTML结构：创建一个包含需要隐藏/显示内容的容器，比如`<div>`元素，并给它一个初始状态（默认关闭），例如添加一个`class`如"collapsed"。

<div class="collapsible">
  <button onclick="toggleContent()">点击展开</button>
  <p class="hidden">这是需要隐藏的内容</p>
</div>

2. CSS样式：设置`.collapsed`类下的内容为`display:none`，以便开始时内容不可见。

.collapsible .hidden {
  display: none;
}

3. JavaScript函数：创建一个名为`toggleContent()`的函数，当用户点击按钮时，切换`.hidden`元素的`display`属性，实现展开或收起。

function toggleContent() {
  var content = document.querySelector('.hidden');
  if (content.style.display === 'none') {
    content.style.display = 'block';
  } else {
    content.style.display = 'none';
  }
}

当你想要控制更多复杂的内容，还可以考虑使用第三方库，如jQuery的`.slideToggle()`方法，或者更现代的React、Vue等框架提供的API。