如何创建可折叠的下拉菜单？

<button class="dropdown-btn">点击展开菜单</button>
<div class="dropdown-content">
  <a href="#">菜单项1</a>
  <a href="#">菜单项2</a>
  <a href="#">菜单项3</a>
</div>

.dropdown-content {
  display: none;
}

.dropdown-btn {
  background-color: #f1f1f1;
  color: black;
  padding: 10px;
  border: none;
  cursor: pointer;
}

.dropdown-btn:hover {
  background-color: #ddd;
}

document.querySelector('.dropdown-btn').addEventListener('click', function() {
  var dropdownContent = document.querySelector('.dropdown-content');
  if (dropdownContent.style.display === 'none') {
    dropdownContent.style.display = 'block';
  } else {
    dropdownContent.style.display = 'none';
  }
});