手风琴在没有jQuery的下拉列表中？

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

.accordion .title {
  cursor: pointer;
  background-color: #f5f5f5;
  padding: 10px;
}

.accordion .content {
  display: none;
  padding: 10px;
}

.accordion .active .content {
  display: block;
}

var accordionItems = document.querySelectorAll('.accordion li');

accordionItems.forEach(function(item) {
  var title = item.querySelector('.title');
  var content = item.querySelector('.content');

  title.addEventListener('click', function() {
    if (item.classList.contains('active')) {
      item.classList.remove('active');
      content.style.display = 'none';
    } else {
      accordionItems.forEach(function(otherItem) {
        otherItem.classList.remove('active');
        otherItem.querySelector('.content').style.display = 'none';
      });

      item.classList.add('active');
      content.style.display = 'block';
    }
  });
});