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

现在，我想要一个统一的设计。我旁边有一个过滤器按钮，显示带有可用过滤器的新视图。我的想法是让这种选择 - 下拉设计与过滤器按钮具有相同的设计 - 这可能吗？正如它在移动设备上一样，它实际上只是一个按钮，可以提供相应的电话下拉视图。

Answer 1

这样的事可能会对你有所帮助。您可以按照自己想要的方式设置样式。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

让按钮启动选项 - 选择下拉列表

1 个答案: