Подскажите пожалуйста, есть скрипт при наведении на ссылку "Țiglă modulară REGLE", появляется блок. Как сделать чтобы при максимальной ширине, например, 1024px другие блоки появлялись по клику только на кнопку "s".
Пример кода ниже:
$(function() {
$(".header__nav-dropmenu--item").hover(
function() {
$('.header__nav-dropmenu--item').removeClass('active')
$(this).addClass('active');
}
);
});
.header__inner {
display: none;
}
.header__nav-dropmenu--item {
margin-bottom: 24px;
}
.header__nav-dropmenu--item.active .header__inner {
display: block;
}
.arrow {
padding: 8px;
background: silver;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="header__nav-list header__nav-list--mobile">
<li class="header__nav-dropmenu--item">
<span class="header__nav-dropmenu--link">
<a href="" class="link">Țiglă modulară REGLE</a>
<span class="arrow">s</span>
</span>
<div class="header__inner">
<div class="header__inner--item">
<a href="" class="header__inner--title">Металлочерепица</a>
<ul class="header__inner--list">
<li class="header__inner--list-item"><a href="">Țiglă modulară REGLE</a></li>
</ul>
</div>
</div>
</li>
<li class="header__nav-dropmenu--item">
<span class="header__nav-dropmenu--link">
<a href="" class="link">Țiglă modulară REGLE</a>
<span class="arrow">s</span>
</span>
<div class="header__inner">
<div class="header__inner--item">
<a href="" class="header__inner--title">Металлочерепица</a>
<ul class="header__inner--list">
<li class="header__inner--list-item"><a href="">Țiglă modulară REGLE</a></li>
</ul>
</div>
</div>
</li>
</ul>