用js实现下拉菜单

使用HTML和CSS创建基础结构

HTML部分需要包含一个触发下拉的按钮（如<button>）和隐藏的下拉内容容器（如<div>）。CSS用于控制下拉内容的显示与隐藏：

<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="#">选项1</a>
    <a href="#">选项2</a>
    <a href="#">选项3</a>
  </div>
</div>

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
}
.dropdown-content a {
  display: block;
  padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
  display: block;
}

通过JavaScript控制显示/隐藏

使用classList.toggle()动态切换CSS类实现交互：

document.querySelector('.dropbtn').addEventListener('click', function() {
  document.querySelector('.dropdown-content').classList.toggle('show');
});

需在CSS中新增.show类：

.show {
  display: block;
}

点击外部区域关闭菜单

监听全局点击事件，判断点击目标是否在菜单区域内：

window.addEventListener('click', function(event) {
  const dropdown = document.querySelector('.dropdown');
  if (!dropdown.contains(event.target)) {
    const content = document.querySelector('.dropdown-content');
    content.classList.remove('show');
  }
});

动态生成下拉选项

通过数据数组动态生成菜单项：

const items = ['首页', '产品', '关于我们'];
const dropdown = document.querySelector('.dropdown-content');
items.forEach(item => {
  const link = document.createElement('a');
  link.href = '#';
  link.textContent = item;
  dropdown.appendChild(link);
});

添加动画效果

使用CSS过渡属性实现平滑展开效果：

.dropdown-content {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s, transform 0.3s;
}
.dropdown-content.show {
  opacity: 1;
  transform: translateY(0);
}

响应式适配

通过媒体查询调整小屏幕下的样式：

@media (max-width: 600px) {
  .dropdown-content {
    min-width: 100%;
  }
}