JSFiddle - React, Tailwind, and code Playground
HTML
<div id="app">
<div class="selected_relative">
<div class="select_list_wrapper">
<div class="select_list_current" @click="select_list_currentClick('sort')" style="border: 1px solid #ccc; border-radius: 4px; padding: 5px; cursor:pointer;">
<span class="label">Сортировать:</span>
<span class="select_list_current_item">По популярности</span>
</div>
<div class="select_list" :class="{open: sortListOpened.sort}">
<div class="select_list_radio"><input type="radio" id="by_popular" name="sort_list" checked><label for="by_popular"><span>По популярности</span> </label></div>
<div class="select_list_radio"><input type="radio" id="by_price" name="sort_list"><label for="by_price"><span>По цене</span> </label></div>
<div class="select_list_radio"><input type="radio" id="by_date" name="sort_list"><label for="by_date"><span>По новизне</span> </label></div>
</div>
</div>
</div>
<div class="selected_relative">
<div class="select_list_wrapper">
<div class="select_list_current" @click="select_list_currentClick('filter')" style="border: 1px solid #ccc; border-radius: 4px; padding: 5px; cursor:pointer;">
<span class="label">Фильтровать:</span>
<span class="select_list_current_item">По рейтингу</span>
</div>
<div class="select_list" :class="{open: sortListOpened.filter}">
<div class="select_list_radio"><input type="radio" id="by_popular" name="sort_list" checked><label for="by_popular"><span>По крутости</span> </label></div>
<div class="select_list_radio"><input type="radio" id="by_price" name="sort_list"><label for="by_price"><span>По попвосоти</span> </label></div>
<div class="select_list_radio"><input type="radio" id="by_date" name="sort_list"><label for="by_date"><span>По РикуиМорти</span> </label></div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
CSS
.select_list {
display: none;
}
.select_list.open {
display: block;
}
JavaScript
new Vue({
el: '#app',
data: {
sortListOpened: {
sort: false,
filter: false
}
},
methods: {
select_list_currentClick(kind) {
this.sortListOpened[kind] = ! this.sortListOpened[kind];
}
}
});