如何在CSS中实现响应式多级菜单_折叠与显示结合媒体查询

<nav class="menu">
  <ul>
    <li><a href="#">首页</a></li>
    <li>
      <a href="#" class="dropdown-toggle">产品</a>
      <ul class="submenu">
        <li><a href="#">手机</a></li>
        <li>
          <a href="#" class="dropdown-toggle">配件</a>
          <ul class="submenu">
            <li><a href="#">耳机</a></li>
            <li><a href="#">充电器</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">关于我们</a></li>
  </ul>
</nav>

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
<p>.menu > ul {
display: flex;
}</p><p>.menu a {
display: block;
padding: 12px 16px;
text-decoration: none;
color: #333;
}</p><p>.submenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}</p><p>.submenu.active {
max-height: 300px; /<em> 足够容纳子项的高度 </em>/
}</p>

document.querySelectorAll('.dropdown-toggle').forEach(toggle => {
  toggle.addEventListener('click', function(e) {
    e.preventDefault();
    const submenu = this.nextElementSibling;
    if (submenu && submenu.classList.contains('submenu')) {
      submenu.classList.toggle('active');
    }
  });
});

@media (max-width: 768px) {
  .menu > ul {
    flex-direction: column;
  }
<p>.menu a {
border-bottom: 1px solid #eee;
}</p><p>.submenu {
background-color: #f9f9f9;
margin-left: 16px;
}
}</p>

.dropdown-toggle::after {
  content: " ▼";
  font-size: 0.7em;
  vertical-align: middle;
}
<p>.dropdown-toggle.collapse::after {
content: " ▲";
}</p>

this.classList.toggle('collapse');