js实现下拉菜单

2026-04-03 21:22:53JavaScript

下拉菜单实现方法

HTML 结构

创建基本的下拉菜单需要包含一个触发按钮和一个隐藏的菜单列表。以下是一个简单的HTML结构示例：

js实现下拉菜单

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

为下拉菜单添加基本样式，确保默认状态下菜单内容隐藏，悬停或激活时显示：

js实现下拉菜单

.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;
  color: black;
}

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

.show {
  display: block;
}

JavaScript 交互

通过JavaScript控制下拉菜单的显示与隐藏：

document.addEventListener('DOMContentLoaded', function() {
  const dropdownBtn = document.querySelector('.dropdown-btn');
  const dropdownContent = document.querySelector('.dropdown-content');

  dropdownBtn.addEventListener('click', function() {
    dropdownContent.classList.toggle('show');
  });

  // 点击页面其他区域关闭下拉菜单
  window.addEventListener('click', function(event) {
    if (!event.target.matches('.dropdown-btn')) {
      if (dropdownContent.classList.contains('show')) {
        dropdownContent.classList.remove('show');
      }
    }
  });
});

增强功能

为下拉菜单添加动画效果，可以使用CSS过渡：

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

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