js实现下拉菜单

使用HTML和CSS创建基础结构

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

<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>

CSS部分设置下拉菜单的样式和初始隐藏状态：

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  display: block;
  padding: 12px 16px;
  text-decoration: none;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

添加JavaScript交互功能

使用事件监听器控制下拉菜单的显示/隐藏：

document.addEventListener('DOMContentLoaded', function() {
  const dropdown = document.querySelector('.dropdown');
  const dropbtn = document.querySelector('.dropbtn');

  dropbtn.addEventListener('click', function() {
    const content = this.nextElementSibling;
    content.style.display = content.style.display === 'block' ? 'none' : 'block';
  });

  // 点击页面其他区域关闭下拉菜单
  document.addEventListener('click', function(event) {
    if (!dropdown.contains(event.target)) {
      document.querySelector('.dropdown-content').style.display = 'none';
    }
  });
});

使用CSS过渡效果增强体验

为下拉菜单添加平滑的显示动画：

.dropdown-content {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.dropdown-content.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

调整JavaScript以配合CSS动画：

dropbtn.addEventListener('click', function() {
  const content = this.nextElementSibling;
  content.classList.toggle('show');
});

响应式设计考虑

添加媒体查询确保在不同设备上正常显示：

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

  .dropdown {
    width: 100%;
  }
}

无障碍访问优化

为下拉菜单添加ARIA属性：

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

更新JavaScript以同步ARIA状态：

dropbtn.addEventListener('click', function() {
  const content = this.nextElementSibling;
  const isExpanded = this.getAttribute('aria-expanded') === 'true';

  this.setAttribute('aria-expanded', !isExpanded);
  content.setAttribute('aria-hidden', isExpanded);
});