0

Помогите плиз. Как сделать чтоб моб меню закрывалось, при клике на ссылку

$('#OpenMobMenu').click(function() {
    $('body').toggleClass('active-menu')
    $(this).toggleClass('active');
    $('header .navigation').toggleClass('active');
});
<body>
<header>
    <div class="container">
        <div class="header-container">
            <div class="button-open">
                <button id="OpenMobMenu">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
            </div>
            <div class="logo">
                <img src="image/logo.svg" alt="">
            </div>
            <div class="navigation">
                <nav class="nav-list">
                    <ul>
                        <li><a href="#about">О компании</a></li>
                        <li><a href="#products">Продукты</a></li>
                        <li><a href="#buy">Где купить</a></li>
                        <li><a href="#services">Сервисы</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</header>
1
  • Добавьте css и поможем )
    – Denis640Kb
    11 фев 2020 в 0:34

2 ответа 2

4

Из вопроса можно лишь понять, что надо закрывать OpenMobMenu при нажатии на ссылки.
Пример:

$('#OpenMobMenu').click(function() {
  $('body').toggleClass('active-menu');
  $(this).toggleClass('active');
  $('header .navigation').toggleClass('active');
});
var z = $('.nav-list').children('ul').children('li').children('a');
let z1 = Array.from(z);

z1.forEach(function(a) {
  $(a).on('click', function() {
    $('.button-open').toggleClass('nonactive');
  })
})
.button-open {
  background-color: #003eff;
  width: 150px;
  text-align: center;
  border-style: double;
}

.active {
  opacity: 1!important;
  transition: 2s;
}

.navigation {
  opacity: 0;
}

.nonactive {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <header>
    <div class="container">
      <div class="header-container">
        <div class="button-open">
          <button id="OpenMobMenu">
              <span>123</span><br>
              <span>2</span><br>
              <span>321</span><br>
          </button>
        </div>
        <div class="logo">
          <img src="image/logo.svg" alt="">
        </div>
        <div class="navigation">
          <nav class="nav-list">
            <ul>
              <li><a href="#about">О компании</a></li>
              <li><a href="#products">Продукты</a></li>
              <li><a href="#buy">Где купить</a></li>
              <li><a href="#services">Сервисы</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </header>
</body>

Если надо скрыть и больше не показывать, то вместо $('.button-open').toggleClass('nonactive'); используйте $('.button-open').addClass('nonactive');

0

наверное не оч понятно обьяснил. Вообщем сам сделал каким-то костылем походу.. но работает

$('#OpenMobMenu').click(function() {
    $('body').toggleClass('active-menu');
    $(this).toggleClass('active');
    $('header .navigation').toggleClass('active');
});

$('header .nav-list ul a').click(function() {
    $('body').removeClass('active-menu');
    $(this).removeClass('active');
    $('header .navigation').removeClass('active');
    $('#OpenMobMenu').removeClass('active');
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.