тут будет очередная открывашка
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.act, .act a{
background-color: rgba(0, 0, 255, 1);
color: rgba(255, 255, 255, 1);
}
.ex-ex .act, .ex-ex .act a{
background-color: rgba(255, 250, 205, 1);
color: rgba(139, 69, 19, 1);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var parent = $(".ex-type li"),
child = $(".ex-ex li");
parent.on("click", function(event) {
event.preventDefault();
var el = $(this);
if(parent.not(el).is(".act")) return;
parent.not(el.toggleClass("act")).removeClass("act");
var id = el.data("id") + "";
child.removeClass("act");
if (el.is(".act")) child.filter(function() {
var data = $(this).data("parent");
data = (data + "").split(/\s*,\s*/);
return data.indexOf(id) !== -1
}).addClass("act");
})
child.on("click", function(event) {
event.preventDefault();
var el = $(this);
if(child.not(el).is(".act")) return;
child.not(el.toggleClass("act")).removeClass("act");
var data = $(this).data("parent");
data = (data + "").split(/\s*,\s*/);
parent.removeClass("act");
if (el.is(".act")) parent.filter(function() {
var id = $(this).data("id") + "";
return data.indexOf(id) !== -1
}).addClass("act");
})
});
</script>
</head>
<body>
<div id="ex-filter">
<div class="ex-type">
<ul>
<li class="col-md-6" data-id="1" data-children="11, 12, 13"><a href="#">Актив</a> (4)</li>
<li class="col-md-6" data-id="2" data-children="12, 14"><a href="#">Пассив</a> (2)</li>
</ul>
</div>
<div class="ex-ex">
<ul>
<li class="col-md-6" data-id="11" data-parent="1"><a href="#">Горы</a> (4)</li>
<li class="col-md-6" data-id="12" data-parent="2"><a href="#">Лес</a> (2)</li>
<li class="col-md-6" data-id="13" data-parent="2"><a href="#">Пляж</a> (2)</li>
<li class="col-md-6" data-id="14" data-parent="1, 2"><a href="#">Море</a> (2)</li>
</ul>
</div>
<button class="ex-go">Фильтровать</button>
</div>
</body>
</html>