如何在单击汉堡图标时使导航栏链接垂直显示在导航栏下方

<nav>
  <div class="hamburger-icon"></div>
  <ul class="nav-links">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</nav>

/* 导航栏容器样式 */
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 汉堡图标样式 */
.hamburger-icon {
  width: 30px;
  height: 20px;
  background-color: #333;
  cursor: pointer;
}

/* 链接列表样式 */
.nav-links {
  display: none; /* 初始状态隐藏链接列表 */
  flex-direction: column;
  align-items: flex-start;
}

.nav-links li {
  padding: 10px;
}

/* 媒体查询，控制在特定宽度下显示/隐藏链接列表 */
@media (max-width: 768px) {
  .nav-links {
    display: flex;
  }
}

const hamburgerIcon = document.querySelector('.hamburger-icon');
const navLinks = document.querySelector('.nav-links');

hamburgerIcon.addEventListener('click', () => {
  navLinks.classList.toggle('show'); // 切换链接列表的显示/隐藏状态
});