const sm = $('.side-menu');
if (!sm.length) return;
sm.on('click', 'button', function () {
let item = $(this).closest('li');
item.toggleClass('open');
item.children('ul').slideToggle();
item.closest('ul').children('li').not(item).find('ul').slideUp();
});
sm.find('.open').children('ul').show();<ul class="side-menu">
<li class="open">
<span><a href="#">Металлопрокат</a><button><svg class=" i i-angle-left"><use xlink:href="/design/images/sprite.svg#angle-left"></use></svg></button></span>
<ul class="side-menu__nested">
<li class="open">
<span><a href="#">Сортовой прокат</a><button><svg class=" i i-angle-left"><use xlink:href="/design/images/sprite.svg#angle-left"></use></svg></button></span>
<ul class="side-menu__nested">
<li class="">
<span><a href="#">Квадратный</a><button><svg class=" i i-angle-left"><use xlink:href="/design/images/sprite.svg#angle-left"></use></svg></button></span>
<ul class="side-menu__nested">
<li class=""><span><a href="#">Балка</a></span></li>
<li class=""><span><a href="#">Уголок</a></span></li>
<li class="current"><span><a href="#">Швеллер</a></span></li>
<li class=""><span><a href="#">Арматура</a></span></li>
</ul>
</li>
<li class="">
<span><a href="#">Круглый</a><button><svg class=" i i-angle-left"><use xlink:href="/design/images/sprite.svg#angle-left"></use></svg></button></span>
<ul class="side-menu__nested">
<li class=""><span><a href="#">Балка</a></span></li>
<li class=""><span><a href="#">Уголок</a></span></li>
<li class="current"><span><a href="#">Швеллер</a></span></li>
<li class=""><span><a href="#">Арматура</a></span></li>
</ul>
</li>
<li class="">
<span><a href="#">Шестигранный</a><button><svg class=" i i-angle-left"><use xlink:href="/design/images/sprite.svg#angle-left"></use></svg></button></span>
<ul class="side-menu__nested">
<li class=""><span><a href="#">Балка</a></span></li>.item:first-child,
.item:nth-child(3n+4) {
// 1,4,7,10...
}
.item:nth-child(3n+3) {
// 3,6,9,12...
}.item:nth-child(3n+1) {
// 1,4,7,10...
}<h2 class="heading heading_red">
...
</h2><h2 class="heading heading_theme_red">
...
</h2><h2 class="heading heading_primary">...</h2>
<h2 class="heading heading_secondary">...</h2>.block {
$this: &;
color: red;
&__element { font-size: 12px; }
&:hover &__element { transform: scale(1.1); }
@media () {}
//==
//== Модификация какая-то
//== ==========================
#{$this}_mod {
color: green;
&__element { font-size: 16px; }
@media () {}
}
#{$this}__mod:hover &__element { transform: scale(1.1); }
//==
//== Другая модификация
//== ==========================
&_mod { background: yellow; }
@media () {}
}<img src="https://loremflickr.com/g/200/200/carnaval"
style="display:none"
onload="this.style.display='inline-block'"
><html id="no-js" lang="en">
<head>
<script>document.documentElement.id = 'js'</script>
<style>#no-js .no-js-hidden { display: none !important; }</style>
...
</head>
<body>
...
<img class="no-js-hidden" src="https://loremflickr.com/g/200/200/carnaval">
....scroll_bar {
overflow-y: scroll;
height: 730px;
align-content: flex-start; /* fix */
}$('.add_item').data('id', 2);
$('.add_item').data('title', 'Справка в бассейн (взрослых)-1');$('.add_item').data({
id: 2,
title: 'Справка в бассейн (взрослых)-1'
});Фон менял сам!
/*box-shadow: 0 0 4px 2px #ffffffe6;*/
/*background: #ffffffe6;*/
box-shadow: 0 0 4px 2px rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.9);.myslider:not(.owl-loaded) {
height: 300px;
overflow-y: scroll;
}