Question

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

<button id="button1" onclick="button1function()">Button 1</button>
<button id="button2" onclick="button2function()">Button 2</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>

我也很好奇一旦再次点击按钮，下拉列表是否会消失。

非常感谢你们！

Answer 1

试试这个

    <script type="text/javascript">
window.onload = function() 
{ 
    document.getElementById('name1').style.display = 'none';
    document.getElementById('name2').style.display = 'none';
};

function button1function(id){

    if(document.getElementById(id).style.display == 'none'){
        document.getElementById(id).style.display = 'initial';
    }else{
        document.getElementById(id).style.display = 'none';
    }
}
function button2function(id){
    if(document.getElementById(id).style.display == 'none'){
        document.getElementById(id).style.display = 'initial';
    }else{
        document.getElementById(id).style.display = 'none';
    }
}
</script>

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

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

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

Answer 2

我有一些代码可以帮助您完成任务：

<script type="text/javascript">

  function emitEvent(element, eventName) {
    var worked = false;
    if(document.createEvent) { // all browsers
      var e = document.createEvent("MouseEvents");
      e.initMouseEvent(eventName, true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
      worked = element.dispatchEvent(e);
    } else if (element.fireEvent) { // ie
      worked = element.fireEvent("on" + eventName);
    }
    if (!worked) { // unknown browser / error
      alert("It didn't worked in your browser.");
    }
  }

  function openDropdown(id){
      var element = document.getElementById(id);
      emitEvent(element, 'mousedown');
  }
</script>

<button id="button1" onclick="openDropdown('name1')">Button 1</button>
<button id="button2" onclick="openDropdown('name2')">Button 2</button>

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

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

这里是demo

Answer 3

一个简单的现代解决方案

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

另见： How to style a dropdown with CSS only without JavaScript?

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

的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;
}

单击按钮后的下拉列表

3 个答案: