Блог

Главная - Вопросы по программированию - Скрытие адаптивной навигации после нажатия на ссылку

Скрытие адаптивной навигации после нажатия на ссылку

#jquery #html #css #navigation

#jquery #HTML #css #навигация

Вопрос:

Проблема, с которой я сталкиваюсь, заключается в том, что когда я переключаю свое адаптивное меню вниз, я хочу, чтобы меню исчезало при нажатии на ссылки. Есть предложения или помощь? Вот JSFiddle

Вот HTML-разметка

 <header>
  <div class="logo-container">
    <button id="mobile-menu" class="menu-btn">
      <i>=</i>
    </button>
  </div>

  <nav class="navigation">
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">ABOUT ME</a></li>
      <li><a href="#">MY WORK</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </nav>
</header>

Вот jQuery :

 var menu = $('.navigation ul'), plink = $('#mobile-menu'), go;

function mobileMenu() {
    var ww = $(window).width();

    if (ww>769 amp;amp; go) { //hide this menu on desktop
        if (menu.is(':hidden')) {
            menu.removeAttr('style');
        }

        plink.unbind();
        go=false;
    }

    else if (ww<768 amp;amp; !go) { //reveal this menu on small screen
        plink.on('click', function(e) {
            e.preventDefault();
            menu.toggle();
            e.stopPropagation();
        });

        go=true;
    }
}

mobileMenu();

Ответ №1:

Вы можете добавить обработчик события щелчка для элементов меню li (используйте какой-нибудь класс для упрощения манипулирования) и в обработчике снова переключать ваше меню.

 $('.navigation > ul > li').on('click', function(){
    menu.toggle();
});

Вы можете прикрепить событие для маленьких экранов и отменить его привязку для больших (как ваша другая логика)

На самом деле, если ссылки вашего меню ссылаются на другую страницу, и на этой странице у вас по умолчанию свернуто то же меню, у вас нет проблем.

Обновлен fiddle

РЕДАКТИРОВАТЬ: демонстрация JSFiddle с обработкой события изменения размера окна в соответствии с комментариями

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

1. Что мне делать, если я не хочу, чтобы моя навигация выполняла другие страницы, и просто оставалась одностраничным веб-сайтом? Как мне тогда это сделать? @Viktor

2. Разве пример кода не решает вашу проблему? Обновлен ответ — добавлена демонстрация скрипки.

3. Вы понимаете, что ваш код, который измеряет ширину осыпи, выполняется только один раз, верно? Если вы хотите поддерживать, например, браузер для настольных компьютеров, который в какой-то момент изменяет размер, вы можете добавить к нему логику для экранов меньшего размера. В этом случае вы можете попробовать использовать событие изменения размера окна и произвести измерение, а также прикрепить / удалить другие события внутри обработчика события изменения размера окна 🙂

4. Как бы я поступил по этому поводу?

5. Я снова изменил вашу скрипку. Может быть, вы захотите что-то подобное — jsfiddle.net/5MCxL/21 . Я также включу ссылку в ответ.