js实现多个下拉菜单

实现多个下拉菜单的方法

使用JavaScript实现多个下拉菜单可以通过动态绑定事件或事件委托的方式完成。以下是两种常见实现方式：

动态绑定事件方式

HTML结构：

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

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

CSS样式：

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

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

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

.show {
  display: block;
}

JavaScript代码：

const dropdowns = document.querySelectorAll('.dropdown');

dropdowns.forEach(dropdown => {
  const btn = dropdown.querySelector('.dropdown-btn');
  const content = dropdown.querySelector('.dropdown-content');

  btn.addEventListener('click', () => {
    content.classList.toggle('show');
  });
});

// 点击其他地方关闭下拉菜单
window.addEventListener('click', (e) => {
  if (!e.target.matches('.dropdown-btn')) {
    const contents = document.querySelectorAll('.dropdown-content');
    contents.forEach(content => {
      if (content.classList.contains('show')) {
        content.classList.remove('show');
      }
    });
  }
});

事件委托方式

HTML结构同上，JavaScript改用事件委托：

document.addEventListener('click', (e) => {
  // 点击按钮时切换对应下拉菜单
  if (e.target.classList.contains('dropdown-btn')) {
    const content = e.target.nextElementSibling;
    content.classList.toggle('show');
  }

  // 点击其他地方时关闭所有下拉菜单
  if (!e.target.matches('.dropdown-btn') && !e.target.matches('.dropdown-content a')) {
    const contents = document.querySelectorAll('.dropdown-content');
    contents.forEach(content => {
      content.classList.remove('show');
    });
  }
});

使用框架的实现方式

如果使用jQuery，代码会更简洁：

$(document).ready(function() {
  $('.dropdown-btn').click(function() {
    $(this).next('.dropdown-content').toggle();
  });

  $(document).click(function(e) {
    if (!$(e.target).closest('.dropdown').length) {
      $('.dropdown-content').hide();
    }
  });
});

注意事项

确保CSS中的定位正确，通常下拉内容使用position: absolute，父元素使用position: relative

考虑添加过渡动画效果提升用户体验：

.dropdown-content {
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
}

.dropdown-content.show {
  opacity: 1;
  visibility: visible;
}

对于移动端设备，可能需要添加触摸事件支持，使用touchstart事件替代或补充click事件