如何创建一个带有水平显示项目的组合框？

Question

我想创建一个组合框（下拉列表），其中的项目像网格一样水平显示。我在网上搜索，但可以找到允许我创建的模板或任何第三方组件。我正在寻找有关组件或简单代码的任何建议，这些建议可以使我对如何创建它有所了解。我在这个

中寻找类似的东西

Answer 1

以下是您需要解决的方法。试试吧，可能适合

function reveal(){
  document.getElementById('h').className = 'open';
}
function closed(){
document.getElementById('h').className = 'close';

}

div {height: 50px; background: green; color: white;}
#h {height: 0; transition: height 1s linear; background: blue}
#h.open {height: 50px}
#h.close {height: 0px}

<div>This is the header area<br><button onclick="reveal()">Open the dropdown</button></div>
<div id="h" >I'm the hidden part of the page, Insert what ever you wanted</div>

<button onclick="closed()">Make this button as a division to hide the dropdown when click on below area </button>