用js实现下拉菜单

使用HTML和CSS创建基础结构

HTML部分需要定义一个触发下拉的按钮和隐藏的菜单内容：

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

CSS部分设置默认隐藏下拉内容：

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 120px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
}
.dropdown:hover .dropdown-content {
  display: block;
}

纯JavaScript实现交互逻辑

通过事件监听控制菜单显示/隐藏：

document.querySelector('.dropdown-btn').addEventListener('click', function() {
  const content = this.nextElementSibling;
  content.style.display = content.style.display === 'block' ? 'none' : 'block';
});

// 点击页面其他区域关闭菜单
document.addEventListener('click', function(e) {
  if (!e.target.matches('.dropdown-btn')) {
    const dropdowns = document.querySelectorAll('.dropdown-content');
    dropdowns.forEach(item => {
      item.style.display = 'none';
    });
  }
});

增强版带动画效果

添加CSS过渡动画：

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

修改JavaScript逻辑：

const btn = document.querySelector('.dropdown-btn');
btn.addEventListener('click', function() {
  const content = this.nextElementSibling;
  content.classList.toggle('show');
});

多级下拉菜单实现

HTML结构扩展：

<div class="dropdown">
  <button class="dropdown-btn">主菜单</button>
  <div class="dropdown-content">
    <a href="#">一级选项</a>
    <div class="nested-dropdown">
      <a href="#" class="nested-btn">嵌套选项 ▶</a>
      <div class="nested-content">
        <a href="#">二级选项1</a>
        <a href="#">二级选项2</a>
      </div>
    </div>
  </div>
</div>

添加对应JavaScript：

document.querySelectorAll('.nested-btn').forEach(btn => {
  btn.addEventListener('click', function(e) {
    e.stopPropagation();
    this.nextElementSibling.classList.toggle('active');
  });
});

响应式设计考虑

添加媒体查询适应移动端：

@media (max-width: 768px) {
  .dropdown-content {
    position: static;
    width: 100%;
  }
}