Добрый день. Есть разметка. Упрощенно выглядит так:
<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>
Нужно на jQuery реализовать фильтр. Разумеется, количество пунктов - заведомо не известно, что в первом, что во втором списке.
Работает так: кликаю по пункту "Актив", "Пассив" деактивируется (да и вообще все элементы из этого-же списка, если они есть). Скрипт анализирует во втором списке data-parent, сравнивает с data-id элемента по которому кликнули, и если в data-parent из второго списка нет data-id из первого списка, он тоже деактивируется (то есть "Лес" и "Пляж" в данном случае деактивируются(я думаю, просто на css сделать через динамическое добавление класса)). Повторное нажатие по этому же пункту списка, возвращает все назад.
Подскажите, как это реализовать.
