html - 让按钮启动选项选择下拉菜单

Question

我正在为移动设备设计，我有一个包含不同选项的选择下拉菜单，如下所示:

<select id="sorter" class="form-control">
    <option selected disabled hidden>SORT</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select

现在，我想要一个统一的设计。我在它旁边有一个过滤器按钮，它显示了一个带有可用过滤器的新 View 。我的想法是让这种选择下拉菜单具有与过滤器按钮相同的设计——这可能吗？由于它在移动设备上，它实际上只是一个按钮，应该提供相应的手机下拉 View 。

Answer 1

这样的事情可能对你有帮助。您可以按照自己喜欢的方式设置样式。

$("body").on("click", ".selected", function() {
  $(this).next(".options").toggleClass("open");
});

$("body").on("click", ".option", function() {
  $(".selected").html($(this).find("span").html());
  $(".options").toggleClass("open");
});

.container {
  display: flex;
  flex-wrap: wrap;
  width: 25%;
}

.selected {
  border: thin solid darkgray;
  border-radius: 5px;
  background: lightgray;
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 1.5em;
  margin-bottom: .2em;
  padding-left: .5em;
  min-width: 150px;
  position: relative;
}

.selected:after {
  font-family: FontAwesome;
  content: "\f0d7";
  margin-left: 1em;
  position: absolute;
  right: .5em;
}

.options {
  display: none;
  margin: 0;
  padding: 0;
}

.options.open {
  display: inline-block;
}

li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
}

li>img {
  margin-right: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
  <div class="selected">Select an option</div>
  <ul class="options">
    <li class="option"><img src="http://placehold.it/50/00ff00"><span>Option 1</span></li>
    <li class="option"><img src="http://placehold.it/50/ff0000"><span>Option 2</span></li>
    <li class="option"><img src="http://placehold.it/50/0000ff"><span>Option 3</span></li>
  </ul>
</div>