JS实现列表收缩功能

<ul>
  <li>
    <h3>标题1</h3>
    <div class="content">
      <p>内容1</p>
    </div>
  </li>
  <li>
    <h3>标题2</h3>
    <div class="content">
      <p>内容2</p>
    </div>
  </li>
  <li>
    <h3>标题3</h3>
    <div class="content">
      <p>内容3</p>
    </div>
  </li>
</ul>

ul li {
  cursor: pointer;
}
ul li .content {
  display: none;
}
ul li .content.show {
  display: block;
}

// 获取所有的列表项
var listItems = document.querySelectorAll('ul li');
// 遍历列表项，并为每个列表项添加点击事件监听器
listItems.forEach(function(item) {
  item.addEventListener('click', function() {
    // 切换内容的显示与隐藏
    item.querySelector('.content').classList.toggle('show');
  });
});