当前位置：首页 > JavaScript

实现下拉菜单js

2026-03-01 22:36:15JavaScript

使用HTML和JavaScript创建基础下拉菜单

HTML部分定义一个按钮和下拉内容容器

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

CSS样式控制下拉菜单的显示效果

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

JavaScript控制显示/隐藏逻辑

function toggleDropdown() {
  document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var i = 0; i < dropdowns.length; i++) {
      dropdowns[i].classList.remove('show');
    }
  }
}

使用事件委托优化多下拉菜单

HTML结构包含多个下拉菜单

<div class="dropdown">
  <button class="dropbtn">菜单1</button>
  <div class="dropdown-content">
    <a href="#">选项A</a>
    <a href="#">选项B</a>
  </div>
</div>
<div class="dropdown">
  <button class="dropbtn">菜单2</button>
  <div class="dropdown-content">
    <a href="#">选项X</a>
    <a href="#">选项Y</a>
  </div>
</div>

JavaScript使用事件委托处理多个菜单

document.addEventListener('click', function(event) {
  if (event.target.classList.contains('dropbtn')) {
    event.target.nextElementSibling.classList.toggle('show');
  } else {
    var dropdowns = document.querySelectorAll('.dropdown-content');
    dropdowns.forEach(function(dropdown) {
      dropdown.classList.remove('show');
    });
  }
});

使用CSS过渡动画增强用户体验

为下拉菜单添加平滑的展开动画

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

响应式设计适配移动设备

添加媒体查询优化移动端体验

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

使用现代JavaScript简化代码

ES6语法重构下拉菜单逻辑

实现下拉菜单js

class Dropdown {
  constructor(button) {
    this.button = button;
    this.content = button.nextElementSibling;
    this.button.addEventListener('click', () => this.toggle());
  }

  toggle() {
    this.content.classList.toggle('show');
  }

  static closeAll() {
    document.querySelectorAll('.dropdown-content.show')
      .forEach(content => content.classList.remove('show'));
  }
}

document.querySelectorAll('.dropbtn').forEach(btn => new Dropdown(btn));

document.addEventListener('click', (e) => {
  if (!e.target.closest('.dropdown')) {
    Dropdown.closeAll();
  }
});