Как изменить hover на click, при адаптиве?

Question

Подскажите пожалуйста, есть скрипт при наведении на ссылку "Ț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>

Answer 1

Раз уж начали реализовывать на jquery, я продолжу:

$(function() {
    
    let $nav = $(".header__nav-dropmenu--item");
    
    function dropdownMenu(){
        $nav.removeClass('active')
        $(this).addClass('active');
    }
    
    function windowSize(){
    if ($(window).width() <= '1024'){
        $nav.unbind('mouseenter');
        $nav.bind('click', dropdownMenu);
    } else {
        $nav.unbind('click');
        $nav.bind('mouseenter', dropdownMenu);
    }
    }
    
    $(window).on('load', windowSize); 
    $(window).on('resize', windowSize); 
    
});

.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>

БЛОГ НА HUSL

Как изменить hover на click, при адаптиве?

Ответы (1 шт):