2

Помогите поправить мобильное меню. Есть меню, у которого по нажатию по кнопке "гамбургер" происходит смещение блока контента вправо и тем самым выезжает мобильное меню. Проблема в том, что в самом меню есть пункты, которые не подразумевают перехода на страницу - там на 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

4
  • А где у Вас там гамбургер-то?
    – ymd
    21 авг 2018 в 6:58
  • prntscr.com/kl38kr
    – Batyabest
    21 авг 2018 в 7:00
  • по каким пунктам сворачивания быть не должно?
    – Nikolay
    21 авг 2018 в 7:04
  • Домашний уход, Профессиональный уход. И по ним потом появляется меню из 4 пунктов в каждом - своего рода второй уровень меню. По ним тоже не должно быть сворачивания, а появление третьего уровня меню. Вот уже с третьего уровня идет переход на нужную страницу. Также сворачивание не должно происходить по нажатию на ссылку "Назад"
    – Batyabest
    21 авг 2018 в 7:12

2 ответа 2

3

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

Вот этот код:

 if (eve.target.nodeName === 'A') { slideout.close(); }
2
  • Спасибо! Немного по другому сделал, но ваш ответ реально навел на мысль, что можно для этого куска кода указать класс ссылки "гамбургера". И тогда сворачивание работает только на ней.
    – Batyabest
    21 авг 2018 в 7:21
  • @Batyabest рад слышать)
    – Nikolay
    21 авг 2018 в 7:25
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>
3
  • Все работать будет, но не корректно ставить на кнопки тег ссылки
    – Nikolay
    21 авг 2018 в 7:18
  • @Nikolay эти ссылки тоже рабочие и могут использоваться чисто для "открыть в новой вкладке" 21 авг 2018 в 7:22
  • тут согласен, если это требуется
    – Nikolay
    21 авг 2018 в 7:24

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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