JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-1.4.min.js"></script>
<div class="box">
<div class="open">Цена 3<span class="expand"></span></div>
<ul>
<li>
<input type="checkbox" id="prices_1000_3" />
<label for="prices_1000_3">до 1000 руб.</label>
</li>
<li>
<input type="checkbox" id="prices_2000_3" />
<label for="prices_2000_3">от 1000 до 2000 руб</label>
</li>
<li>
<span><input type="checkbox" id="prices_3000_3" /></span>
<label for="prices_3000_3">от 2000 до 3000 руб</label>
</li>
</ul>
</div>
CSS
.box {
vertical-align: top;
display: inline-block;
width: 140px;
margin: 15px auto;
background: #fff;
border: 1px solid #C8B5A1;
cursor: default;
position: relative;
font-size: 13px;
}
.expand {
background: url(http://s018.radikal.ru/i505/1507/d8/163953153543.png) no-repeat left;
height: 10px;
width: 10px;
margin: 3px 0;
float: right;
cursor:default
}
.open {
margin: 0 3px;
cursor: pointer;
padding: 1px;
}
ul {
display:none; position:absolute; width:155px; margin:0px -1px -1px; border: 1px solid #C8B5A1; overflow:hidden; background:none 0% 0% repeat scroll rgb(255, 255, 255);padding: 7px 0px;
}
ul li {
font-size: 13px;
color: #374747;
padding: 3px;
}
.checked {
background: #3696E9;
color: #fff;
}
JavaScript
$(function () {
var $ul = $('ul');
$(document).bind("click", function (event) {
var $target = $(event.target),
$open = $target.closest('.open'),
$slidingUl;
if ($open.length) {
$slidingUl = $open.next();
$slidingUl.slideToggle();
$ul.not($slidingUl).slideUp();
return;
}
if ($target.closest('ul').length) {
return;
}
$ul.slideUp();
});
$('input[type="checkbox"]').bind('change', function () {
$(this).parent().toggleClass('checked');
});
});