如何在自适应中折叠列表项的边界

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

.list {
  list-style: none;
  padding: 0;
}

.title {
  cursor: pointer;
  background-color: #f0f0f0;
  padding: 10px;
  margin: 0;
}

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

@media (max-width: 768px) {
  .title {
    border-bottom: 1px solid #ccc;
  }

  .title::after {
    content: '+';
    float: right;
  }

  .title.open::after {
    content: '-';
  }

  .content {
    display: none;
  }

  .title.open + .content {
    display: block;
  }
}

const titles = document.querySelectorAll('.title');

titles.forEach((title) => {
  title.addEventListener('click', () => {
    title.classList.toggle('open');
  });
});