Collapse/hide 导航 link 点击后的移动导航菜单

Question

我的 wordpress 网站上有一个 ajax 页面加载，包含官方的 2016 和店面主题。

唯一的问题是，一旦 link 被点击并且新页面被 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>

根据我对此事的研究，似乎有两种方法可以实现我所追求的目标。

将点击时的 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');
        }
    });
});

使用 jquery 单击函数触发切换按钮。

$( "#menu-main" ).click(函数() { $( "#menu-toggle" ).click(); });

如有任何帮助，我们将不胜感激！谢谢！

Answer 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");
   });
});

Answer 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>

Collapse/hide 导航 link 点击后的移动导航菜单

Collapse/hide mobile nav menu after nav link click

javascript

wordpress

mobile

jquery

storefront