JavaScript
- 3 ответа
- 0 вопросов
2
Вклад в тег
body {
margin: 0;
overflow: hidden;
}
body > .scroll-box {
position: relative;
left: 0;
right: 0;
height: 100%;
max-height: 100vh;
overflow-y: auto;
}$modal.on('show', () => $scrollBox.css({ 'pointer-events': 'none' }));
$modal.on('hide', () => $scrollBox.css({ 'pointer-events': 'auto' }));<div class="filter-control">
<ul data-f1="a">
<li><a data-f2="Chicago" href="#">Chicago</a></li>
<li><a data-f2="Houston" href="#">Houston</a></li>
<li><a data-f2="Dallas" href="#">Dallas</a></li>
</ul>
<ul data-f1="b">
<li><a data-f2="Chicago" href="#">Chicago</a></li>
<li><a data-f2="Houston" href="#">Houston</a></li>
<li><a data-f2="Dallas" href="#">Dallas</a></li>
</ul>
<ul data-f1="c">
<li><a data-f2="beer" href="#">beer</a></li>
<li><a data-f2="whiskey" href="#">whiskey</a></li>
</ul>
</div>
<div class="filteredblock a b c">
<div class="a-Chicago b-Houston c-beer">Chicago Houston beer</div>
<div class="a-Chicago b-Houston c-whiskey">Chicago Houston whiskey</div>
<div class="a-Chicago b-Dallas c-beer">Chicago Dallas beer</div>
<div class="a-Chicago b-Dallas c-whiskey">Chicago Dallas whiskey</div>
<div class="a-Houston b-Chicago c-beer">Houston Chicago beer</div>
<div class="a-Houston b-Chicago c-whiskey">Houston Chicago whiskey</div>
<div class="a-Houston b-Dallas c-beer">Houston Dallas beer</div>
<div class="a-Houston b-Dallas c-whiskey">Houston Dallas whiskey</div>
<div class="a-Dallas b-Chicago c-beer">Dallas Chicago beer</div>
<div class="a-Dallas b-Chicago c-whiskey">Dallas Chicago whiskey</div>
<div class="a-Dallas b-Houston c-beer">Dallas Houston beer</div>
<div class="a-Dallas b-Houston c-whiskey">Dallas Houston whiskey</div>
</div>$(function () {
var $list = $('.filteredblock');
$('.filter-control a').on('click', (e) => {
var $a = $(e.target);
var $li = $a.parent();
var $ul = $li.parent();
var f1 = $ul.data('f1');
var f2 = $a.data('f2');
$li.toggleClass('checked');
if ($li.hasClass('checked')) {
$list.addClass(`${f1}-${f2}`).removeClass(`${f1}`);
} else {
$list.removeClass(`${f1}-${f2}`);
if (!$ul.find('.checked').length)
$list.addClass(`${f1}`);
}
return false;
});
});@charset "utf-8";
body {
background: #fff;
padding: 20px;
font-family: Segoe UI Symbol;
color: #000;
}
.filter-control li {
list-style-type: none;
}
.filter-control li:not(.checked):before {
content: '☐';
}
.filter-control li.checked:before {
content: '☑';
}
.filteredblock > div {
color: #fff;
}
.filteredblock.a.b.c > div,
.filteredblock.a-Chicago > .a-Chicago,
.filteredblock.a-Houston > .a-Houston,
.filteredblock.a-Dallas > .a-Dallas,
.filteredblock.b-Chicago > .b-Chicago,
.filteredblock.b-Houston > .b-Houston,
.filteredblock.b-Dallas > .b-Dallas,
.filteredblock.c-beer > .c-beer,
.filteredblock.c-whiskey > .c-whiskey {
color: #000;
}
.filteredblock:not(.a):not(.a-Chicago) > .a-Chicago,
.filteredblock:not(.a):not(.a-Houston) > .a-Houston,
.filteredblock:not(.a):not(.a-Dallas) > .a-Dallas,
.filteredblock:not(.b):not(.b-Chicago) > .b-Chicago,
.filteredblock:not(.b):not(.b-Houston) > .b-Houston,
.filteredblock:not(.b):not(.b-Dallas) > .b-Dallas,
.filteredblock:not(.c):not(.c-beer) > .c-beer,
.filteredblock:not(.c):not(.c-whiskey) > .c-whiskey {
color: #fff;
}var addCSS = function (selector, style) {
var sheet = window.document.styleSheets[window.document.styleSheets.length - 1];
sheet.addRule(selector, style);
};