包含div的下拉选择单击纯javascript

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

// 获取下拉按钮和下拉框的元素
var dropdownBtn = document.querySelector('.dropdown-btn');
var dropdownContent = document.querySelector('.dropdown-content');

// 添加点击事件监听器
dropdownBtn.addEventListener('click', function() {
  // 切换下拉框的显示状态
  dropdownContent.classList.toggle('show');
});

// 点击其他地方时，隐藏下拉框
window.addEventListener('click', function(event) {
  if (!event.target.matches('.dropdown-btn')) {
    dropdownContent.classList.remove('show');
  }
});