Блог

Главная - Вопросы по программированию - Закройте мобильное меню в ссылках идентификаторов

Закройте мобильное меню в ссылках идентификаторов

#javascript

Вопрос:

Это мобильное меню, которое я написал для своего сайта.

Иногда некоторые ссылки являются идентификаторами. (Пример: herf=»#идентификатор»)

Я хочу, чтобы меню автоматически закрывалось, когда пользователь нажимает, когда есть такие ссылки. (Также закройте значок гамбургера.)

В JavaScript, можете ли вы сказать мне, что делать?

 /* eslint-env browser */
(function() {
  'use strict';
   document.addEventListener('DOMContentLoaded', function() {

    let hamburger = document.querySelector('.js-hamburger');
    let hamburgerMenu = function () {
      document.querySelector('.js-navs').classList.toggle('is-open');
    };
    if (hamburger) {
      hamburger.addEventListener('click', hamburgerMenu, false);
    }

   });
 })(); 
 <link href="https://restaurant-landing.surge.sh/styles/main.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="o-section c-section--header" style="background-image: none;">
      <div class="o-section__wrapper">
        <div class="c-header">
          <div class="c-header__col">

            <div class="c-hamburger">
              <input class="c-hamburger__checkbox js-hamburger" type="checkbox" aria-label="Menu" />
              <span class="c-hamburger__icon"></span>
              <span class="c-hamburger__icon"></span>
              <span class="c-hamburger__icon"></span>
            </div>
          </div>
          <div class="c-header__col">
            <div class="c-header__wrap js-navs">
              <ul class="s-nav">
                <li>
                  <a href="#why-us" title="WHY US">WHY US</a>
                </li>
                <li>
                  <a href="#menu" title="MENU">MENU</a>
                </li>
                <li>
                  <a href="#popular-dishes" title="POPULAR DISHES">POPULAR DISHES</a>
                </li>
                <li>
                  <a href="#book" title="BOOK">BOOK</a>
                </li>
                <li>
                  <a href="#contact" title="CONTACT">CONTACT</a>
                </li>
              </ul>
            </div>
          </div>
        </div>

      </div>
    </header>

Ответ №1:

Я думаю, что это делает свое дело:

 const hashLinks = document.querySelectorAll('.s-nav a');
hashLinks.forEach((element) => {
    if(element.hash[0] == '#') {
        element.addEventListener('click', hamburgerMenu);
    }
});

Как это работает:

  • получает все ссылки в вашем меню
  • перебирает каждый элемент
  • если ссылка элемента содержит хэштег в качестве первого символа
  • назначьте прослушиватель событий щелчка для переключения меню

Комментарии:

1. Почему нет document.querySelectorAll('.s-nav a'); ?

2. Спасибо, это правда. Здесь есть проблема, которая была закрыта нажатием на ссылку меню, но значок гамбургера остается открытым.

3. @Джошуа Смарт, ты знаешь, что мне следует с этим делать?

Ответ №2:

 /* eslint-env browser */
(function() {
  'use strict';
   document.addEventListener('DOMContentLoaded', function() {

    let hamburger = document.querySelector('.js-hamburger');
    let hamburgerMenu = function () {
      document.querySelector('.js-navs').classList.toggle('is-open');
    };
    if (hamburger) {
      hamburger.addEventListener('click', hamburgerMenu, false);
    };
    $(".s-nav a").each((indx,link) => {
      if(link.hash.startsWith("#")) link.addEventListener("click",hamburgerMenu);
    });
   });
 })(); 
 <link href="https://restaurant-landing.surge.sh/styles/main.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="o-section c-section--header" style="background-image: none;">
      <div class="o-section__wrapper">
        <div class="c-header">
          <div class="c-header__col">

            <div class="c-hamburger">
              <input class="c-hamburger__checkbox js-hamburger" type="checkbox" aria-label="Menu" />
              <span class="c-hamburger__icon"></span>
              <span class="c-hamburger__icon"></span>
              <span class="c-hamburger__icon"></span>
            </div>
          </div>
          <div class="c-header__col">
            <div class="c-header__wrap js-navs">
              <ul class="s-nav">
                <li>
                  <a href="#why-us" title="WHY US">WHY US</a>
                </li>
                <li>
                  <a href="#menu" title="MENU">MENU</a>
                </li>
                <li>
                  <a href="#popular-dishes" title="POPULAR DISHES">POPULAR DISHES</a>
                </li>
                <li>
                  <a href="#book" title="BOOK">BOOK</a>
                </li>
                <li>
                  <a href="#contact" title="CONTACT">CONTACT</a>
                </li>
              </ul>
            </div>
          </div>
        </div>

      </div>
    </header>

Комментарии:

1. Спасибо, все работает нормально. Но есть одна проблема: когда меню закрыто, значок гамбургера остается открытым.

Метки: