javascript - 选择后如何关闭下拉菜单？

Question

最初我只想根据所选类型进行过滤。然后我决定我想使用<li>而不是模拟下拉菜单，<select>因为我刚刚弄清楚了过滤器并认为它会更快。我错了。我相信这是一个简单的修复“点击”

我尝试将代码片段分解为最简单的部分，并且能够让每个功能单独工作，但未能成功让它们一起工作。

<ul class="list-unstyled">
    <li class="init">[SELECT]</li>
    <li data-value="value 1">Option 1</li>
    <li data-value="value 2">Option 2</li>
    <li data-value="value 3">Option 3</li>
</ul>

<ul class="list-unstyled">
    <li class="init">[SELECT]</li>
    <li id="opt1" data-value="value 1" class="filter">Option 1</li>
    <li id="opt2" data-value="value 2" class="filter">Option 2</li>
    <li id="reset"  data-value="value 3" class="filter">Option 3</li>
</ul>

单击选择时，预期的行为是选择框由所选类型填充。目前，下拉菜单保持打开状态，所有选择类型均可见

标签： javascriptjquerycss