Исправить мобильное меню

147

13 ноября 2018, 07:40

Помогите поправить мобильное меню. Есть меню, у которого по нажатию по кнопке "гамбургер" происходит смещение блока контента вправо и тем самым выезжает мобильное меню. Проблема в том, что в самом меню есть пункты, которые не подразумевают перехода на страницу - там на jquery выводится подменю и т.д. и в результате при клике по любому из пунктов меню оно сворачивается. Помогите сделать так, чтобы при клике по тем пунктам, где нет перехода на страницы мобильное меню не уезжало. Вот код JS:

<script>
  window.onload = function() {
    document.querySelector('.js-slideout-toggle').addEventListener('click', function() {
      slideout.toggle();
    });
    document.querySelector('.menu').addEventListener('click', function(eve) {
      if (eve.target.nodeName === 'A') { slideout.close(); }
    });
    /*var runner = mocha.run();*/
  };
</script>

В живую можно посмотреть тут (в режиме мобильного устройства). : http://myiconskin.sopteh.beget.tech

Answer 1

У вас в коде указано, что принажатии на любой тег <a> происходит закрытие меню. Просто используйте тег <button>.

Вот этот код:

 if (eve.target.nodeName === 'A') { slideout.close(); }

Answer 2

У каждого пункта, где нет перехода на страницу есть class="m-menu". Код проверит его наличие и не станет закрывать меню если это не прямая ссылка. Это должно сработать:

<script>
  window.onload = function() {
    document.querySelector('.js-slideout-toggle').addEventListener('click', function() {
      slideout.toggle();
    });
    document.querySelector('.menu').addEventListener('click', function(eve) {
      if (eve.target.nodeName === 'A' && !eve.target.classList.contains("m-menu")) { slideout.close(); }
    });
    /*var runner = mocha.run();*/
  };
</script>