如何在HTML中创建下拉菜单

Question

我正在处理的任务要求创建一个下拉菜单,例如链接中的一个.我该怎么办？

Answer 1

你可以使用details和summaryHTML5元素(如果IE和Opera Mini不是一个大问题;对于那些下面的例子将优雅地回退)

<details>
  <summary>Please fill out our optional survey</summary>
  <p>What year are you in college?</p>
  <label><input type="radio" name="clg" value="0"> Not yet there</label>
  <label><input type="radio" name="clg" value="1"> Junior</label>
  <label><input type="radio" name="clg" value="2"> Senior</label>
</details>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary
http://html5doctor.com/the-details-and-summary-elements/

还可以找到切换元素的其他方法

要在JavaScript中重新创建上述内容,这是一个ES6示例:

[...document.querySelectorAll('[data-details]')].forEach( el => 
  el.addEventListener('click', () => {
    document.querySelector(el.getAttribute('data-details')).classList.toggle('hide');
    el.classList.toggle('open');
    el.setAttribute('aria-expanded', el.classList.contains('open'));
  })
);

[data-details] {
  display: block;
  width: 100%;
  -webkit-appearance: none;
  background: none;
  border: none;
  text-align: left;
  font: inherit;
}
[data-details]:before      { content: "\25ba"; speak: none; }
[data-details].open:before { content: "\25bc"; speak: none; } 

.hide{ display: none; }

<button type="button" data-details="#d1" aria-describedby="d1" aria-expanded="false" >Summary 1</button>
<div id="d1" class="hide">CONTENT ONE</div>

<button type="button" data-details="#d2" aria-describedby="d2" aria-expanded="false">Summary 2</button>
<div id="d2" class="hide">CONTENT TWO</div>