单击按钮后的下拉列表

Question

我对 HTML 和 Javascript 都比较陌生。我试图弄清楚如何在单击两个按钮之一后打开下拉列表。到目前为止，我的按钮有：

 <button id="button1" onclick="button1function()">Button 1</button>
<button id="button2" onclick="button2function()">Button 2</button>

到目前为止，我的 Button 1 列表是

<select>
    <option value="jsmith">Jane Smith</option>
    <option value="jdoe">John Doe</option>
</select>

到目前为止，我的 Button 2 列表是

<select>
    <option value="iwilliams">Ian Williams</option>
    <option value="arobinson">Andrew Robinson</option>
</select>

我也很好奇再次单击按钮后下拉列表是否会消失。

非常感谢大家！

原文由 ahuber 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

一个简单的现代解决方案

这可以通过使用 classList.toggle 显示或隐藏下拉列表的几行普通 Javascript 来完成。单击显示代码，然后运行片段以查看其工作原理。没有理由加载像 jQuery 这样的大型库，除非它在页面的其他地方使用。

另请参阅： 如何在不使用 JavaScript 的情况下仅使用 CSS 设置下拉菜单的样式？

 for (var e of document.querySelectorAll('.dropdown button')) {
  e.addEventListener('click', function(evt) {
    evt.target.parentElement.classList.toggle('open');
  });
}

 .dropdown {
  position: relative;
  display: inline-block;
  margin-right: 2em;
}
.dropdown select {
  display: none;
  position: absolute;
}
.dropdown.open select {
  display: block;
}

 <div class="dropdown">
  <button>Button 1</button>
  <select>
    <option>Options 1</option>
    <option value="iwilliams">Ian Williams</option>
    <option value="arobinson">Andrew Robinson</option>
  </select>
</div>

<div class="dropdown">
  <button>Button 2</button>
  <select>
    <option>Options 2</option>
    <option value="iwilliams">Ian Williams</option>
    <option value="arobinson">Andrew Robinson</option>
  </select>
</div>

<div class="dropdown">
  <button>Button 3</button>
  <select>
    <option>Options 3</option>
    <option value="iwilliams">Ian Williams</option>
    <option value="arobinson">Andrew Robinson</option>
  </select>
</div>

<div>click to toggle the select</div>

Javascript

 // Add a click handler to all dropdowns on the page
for (var e of document.querySelectorAll('.dropdown button')) {
  e.addEventListener('click', function(evt) {
    evt.target.parentElement.classList.toggle('open');
  });
}

CSS

 .dropdown select {
  display: none;
  position: absolute;
}
.dropdown.open select {
  display: block;
}

原文由 Yogi 发布，翻译遵循 CC BY-SA 3.0 许可协议