Блог

Главная - Вопросы по программированию - Свернуть / скрыть меню мобильной навигации после щелчка по навигационной ссылке

Свернуть / скрыть меню мобильной навигации после щелчка по навигационной ссылке

#javascript #jquery #wordpress #mobile #storefront

#javascript #jquery #wordpress #Мобильный #витрина магазина

Вопрос:

На моем сайте WordPress работает загрузка страницы ajax с официальными темами twenty sixteen и storefront.

Единственная проблема заключается в том, что меню мобильной навигации не закрывается после нажатия на ссылку, и новая страница была извлечена и загружена ajax-скриптом.

Я просмотрел большинство других подобных тем и пробовал различные фрагменты jquery, но не смог заставить его работать.

Код для кнопки переключения меню на twentysixteen : 

 <button id="menu-toggle" class="menu-toggle toggled-on" aria-expanded="true" aria-controls="site-navigation social-navigation">Menu</button>

HTML-контейнер меню : 

 <div class="menu-main-container">
<ul id="menu-main" class="primary-menu">
<li id="menu-item-292" class="menu-item menu-item-type-post_type menu-item- 
object-page menu-item-292"><a href="https://example.com/my-account/">My 
 account</a></li>
<li id="menu-item-293" class="menu-item menu-item-type-post_type menu-item- 
object-page menu-item-293"><a href="https://example.com/labels/">Labels</a> 
</li></ul>
</div>

Из моих исследований по этому вопросу может показаться, что потенциально есть два способа достичь того, что мне нужно.

  1. Изменение атрибута aria при нажатии с expanded="true" на expanded="false" может помочь?

Я нашел этот фрагмент кода, но понятия не имею, как я бы на самом деле реализовал

 $(function () { 
    $('li').on('click', function (e) {
        var menuItem = $( e.currentTarget );

        if (menuItem.attr( 'aria-expanded') === 'true') {
            $(this).attr( 'aria-expanded', 'false');
        } else {
            $(this).attr( 'aria-expanded', 'true');
        }
    });
});

  1. Используйте функцию щелчка jquery для запуска кнопки переключения.

    $( «#menu-main» ).click(function() { $( «#menu-toggle» ).click(); });

Любая помощь будет принята с благодарностью! Спасибо!

Ответ №1:

попробуйте это

 $(function () { 
   $('#menu-main li>a').on('click', function (e) {
       $( "#menu-toggle" ).click();
   });
});

или 

 $(function () { 
   $('#menu-main li>a').on('click', function (e) {

       // i set  $(".toggled-on") because i dunno which is your main menu 
       //<div class="menu-main-container">
       // or 
       //<ul id="menu-main" class="primary-menu">

       $(".toggled-on").attr("aria-expanded","false");
       $(".toggled-on").removeClass(".toggled-on");
   });
});

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

1. Первый фрагмент работает безупречно. Спасибо, Мохаммед!

2. Добро пожаловать всякий раз, когда 🙂

Ответ №2:

Надеюсь, это решит вашу проблему, спасибо

 $("#menu-toggle").click(function(e){  /*for click on menu*/
  $('.menu-main-container').toggle()
})
$('.menu-item').click(function(e){    /*for click on link*/
     $("#menu-toggle").trigger('click')
       
 })  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="menu-toggle" class="menu-toggle toggled-on" aria-expanded="true" aria-controls="site-navigation social-navigation">Menu</button>
<div class="menu-main-container">
<ul id="menu-main" class="primary-menu">
<li id="menu-item-292" class="menu-item menu-item-type-post_type menu-item- 
object-page menu-item-292"><a href="https://example.com/my-account/">My 
 account</a></li>
<li id="menu-item-293" class="menu-item menu-item-type-post_type menu-item- 
object-page menu-item-293"><a href="https://example.com/labels/">Labels</a> 
</li></ul>
</div>