ボタンは、私は携帯用に設計していると私は、異なるオプションで選択ドロップダウンを持っているオプションを選択し、ドロップダウン

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 

、私は制服のデザインをしたいです。私はそれのすぐ横にあるフィルタボタンを持っています。それは利用可能なフィルタを持つ新しいビューを示しています。私の考えは、このソートのselect-dropdownにフィルタボタンと同じデザインを持たせることです - これは可能ですか？それは携帯電話上にあるので、それぞれの電話機のドロップダウンビューを表示するはずのボタンです。

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>