js抽屉式下拉菜单代码

抽屉式下拉菜单是一种常见的用户界面元素，它允许用户通过点击或滑动来展开和收起菜单项。以下是一个简单的JavaScript实现示例，结合HTML和CSS来创建一个基本的抽屉式下拉菜单。

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>抽屉式下拉菜单</title>
<style>
  /* 基础样式 */
  body { font-family: Arial, sans-serif; }
  .menu { position: relative; display: inline-block; }
  .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }
  .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }
  .dropdown-content a:hover { background-color: #f1f1f1; }
</style>
</head>
<body>

<div class="menu">
  <button onclick="toggleDropdown()">菜单</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">首页</a>
    <a href="#services">服务</a>
    <a href="#about">关于我们</a>
    <a href="#contact">联系我们</a>
  </div>
</div>

<script>
function toggleDropdown() {
  document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.menu button')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

</body>
</html>

解释

HTML部分:
- 创建一个按钮和一个下拉内容区域。
- 下拉内容默认是隐藏的（display: none;）。

CSS部分:
- 设置基本的样式，包括下拉菜单的外观和位置。
- 使用position: absolute;确保下拉菜单相对于其触发按钮定位。
JavaScript部分:
- toggleDropdown函数用于切换下拉菜单的显示状态。
- 添加了一个事件监听器，当点击页面其他地方时，关闭所有打开的下拉菜单。