2

Всем привет

Не могу придумать, как сделать данное меню

И так, обычная мобильная навигация, начинается при <1024

Структура:

 <ul class="list">
      <li>
        <a href="#" class="js-open-sub-menu"></a>
        <ul class="sub-list">
          <li>
            <a class="js-one-more-sub" href="#"></a>
            <ul class="subbest-list-ever">
              <li>
                <a href=""></a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>

Максимальный уровень вложенности - 2 уровня.

Все бы хорошо, но у меня есть разводящие страницы. То есть, не можем дать e.preventDefault() для .js-one-more-sub и .js-open-sub-menu. При первом тапе(клике) должен открываться саб-лист, при втором клике - переходить на страницу

Спасибо

4
  • А на счет мобильной навигации. Но, но ведь есть экраны ноутбуков, которые меньше чем iPad (например MacBook Air 11).
    – Eugen Eray
    27 мар 2017 в 7:15
  • @EugenEray И как это сделать? Как я могу определить второй клик по тому же пункту? 27 мар 2017 в 7:16
  • Сейчас, сек, я сверстаю и покажу.
    – Eugen Eray
    27 мар 2017 в 7:17
  • @EugenEray Был бы очень благодарен. До сих пор не придумал работающего варианта 27 мар 2017 в 7:20

1 ответ 1

2

Можно сделать так: по клику (в вашем случае заменить событие на тап) проверять есть ли класс open; если его нет, то запрещаем стандартное поведение, т. е. переход по ссылке; после добавляем класс open. Как следствие, следующий клик (тап) уже будет обрабатываться как обычное нажатие на ссылку.

let submenuLinks = Array.from(document.querySelectorAll('.open-sub'));

submenuLinks.forEach(function(item) {
  item.addEventListener('click', function(e) {
    if (!e.target.classList.contains('open')) e.preventDefault();

    e.target.classList.add('open');
  });
});
.sub-list,
.subbest-list-ever {
  display: none;
}

.open-sub.open+ul {
  display: block;
}
<ul class="list">
  <li>
    <a href="http://google.com" class="open-sub js-open-sub-menu">Ссылка с сабменю</a>
    <ul class="sub-list">
      <li>
        <a class="open-sub js-one-more-sub" href="http://yandex.ru">Ссылка с сабменю</a>
        <ul class="subbest-list-ever">
          <li>
            <a href="http://bing.com">Просто пункт меню</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Версия с jQuery:

$(function() {
  $('.open-sub').click(function(e) {
    if (!$(e.target).hasClass('open')) e.preventDefault();

    $(e.target).addClass('open');
  })
});
.sub-list,
.subbest-list-ever {
  display: none;
}

.open-sub.open+ul {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
  <li>
    <a href="http://google.com" class="open-sub js-open-sub-menu">Ссылка с сабменю</a>
    <ul class="sub-list">
      <li>
        <a class="open-sub js-one-more-sub" href="http://yandex.ru">Ссылка с сабменю</a>
        <ul class="subbest-list-ever">
          <li>
            <a href="http://bing.com">Просто пункт меню</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

2
  • 1й вариант дропает еррор 2й вариант отличный, спасибо большое Вам ! :) 27 мар 2017 в 8:24
  • Подправил первый вариант. Пожалуйста ) 27 мар 2017 в 8:27

Ваш ответ

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

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