在模式中实现可折叠在单击时展开列表中的所有内容

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

.title {
  cursor: pointer;
  font-weight: bold;
}

.content {
  display: none;
}

document.addEventListener('DOMContentLoaded', function() {
  var titles = document.querySelectorAll('.title');
  
  titles.forEach(function(title) {
    title.addEventListener('click', function() {
      var content = this.nextElementSibling;
      
      if (content.style.display === 'none') {
        content.style.display = 'block';
      } else {
        content.style.display = 'none';
      }
    });
  });
});