实现下拉菜单js

使用HTML和JavaScript创建下拉菜单

通过HTML的<select>元素结合JavaScript事件监听，可以快速实现基础下拉菜单功能。

<select id="myDropdown">
  <option value="">请选择</option>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

<script>
  document.getElementById('myDropdown').addEventListener('change', function() {
    const selectedValue = this.value;
    if(selectedValue) {
      console.log('选中:', selectedValue);
      // 这里添加选择后的处理逻辑
    }
  });
</script>

自定义样式下拉菜单

使用CSS和JavaScript实现更美观的自定义下拉菜单：

<div class="custom-dropdown">
  <button class="dropdown-toggle">选择项目 ▼</button>
  <ul class="dropdown-menu">
    <li data-value="item1">项目一</li>
    <li data-value="item2">项目二</li>
    <li data-value="item3">项目三</li>
  </ul>
</div>

<style>
  .custom-dropdown {
    position: relative;
    display: inline-block;
  }
  .dropdown-toggle {
    padding: 8px 16px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    cursor: pointer;
  }
  .dropdown-menu {
    display: none;
    position: absolute;
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #ddd;
    width: 100%;
  }
  .dropdown-menu li {
    padding: 8px 16px;
    cursor: pointer;
  }
  .dropdown-menu li:hover {
    background: #f5f5f5;
  }
</style>

<script>
  const toggle = document.querySelector('.dropdown-toggle');
  const menu = document.querySelector('.dropdown-menu');

  toggle.addEventListener('click', () => {
    menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
  });

  document.querySelectorAll('.dropdown-menu li').forEach(item => {
    item.addEventListener('click', () => {
      toggle.textContent = item.textContent + ' ▼';
      console.log('选择了:', item.dataset.value);
      menu.style.display = 'none';
    });
  });
</script>

使用框架实现下拉菜单

以jQuery为例快速实现功能丰富的下拉菜单：

<select id="jqueryDropdown">
  <option value="">选择...</option>
  <option value="cat">猫咪</option>
  <option value="dog">狗狗</option>
  <option value="bird">小鸟</option>
</select>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    $('#jqueryDropdown').change(function() {
      const val = $(this).val();
      if(val) {
        alert('您选择了: ' + val);
      }
    });
  });
</script>

响应式下拉菜单实现

针对移动端优化的响应式下拉菜单方案：

<nav class="responsive-menu">
  <button class="menu-toggle">菜单 ☰</button>
  <ul class="dropdown-content">
    <li><a href="#home">首页</a></li>
    <li><a href="#services">服务</a></li>
    <li><a href="#about">关于</a></li>
    <li><a href="#contact">联系</a></li>
  </ul>
</nav>

<style>
  .menu-toggle {
    display: none;
    background: #333;
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 16px;
  }
  .dropdown-content {
    display: flex;
    list-style: none;
  }
  .dropdown-content li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
  }

  @media (max-width: 768px) {
    .menu-toggle {
      display: block;
    }
    .dropdown-content {
      display: none;
      flex-direction: column;
      width: 100%;
    }
    .dropdown-content.show {
      display: flex;
    }
  }
</style>

<script>
  const toggleBtn = document.querySelector('.menu-toggle');
  const menu = document.querySelector('.dropdown-content');

  toggleBtn.addEventListener('click', () => {
    menu.classList.toggle('show');
  });
</script>

动态加载下拉选项

通过JavaScript动态加载下拉菜单选项的示例：

<select id="dynamicDropdown"></select>

<script>
  const dropdown = document.getElementById('dynamicDropdown');
  const options = [
    { value: 'red', text: '红色' },
    { value: 'green', text: '绿色' },
    { value: 'blue', text: '蓝色' }
  ];

  // 清空现有选项
  dropdown.innerHTML = '<option value="">请选择颜色</option>';

  // 动态添加选项
  options.forEach(option => {
    const optElement = document.createElement('option');
    optElement.value = option.value;
    optElement.textContent = option.text;
    dropdown.appendChild(optElement);
  });

  // 添加事件监听
  dropdown.addEventListener('change', function() {
    if(this.value) {
      console.log('选择的颜色:', this.value);
    }
  });
</script>