单击导航链接后折叠/隐藏移动导航菜单 [英] Collapse/hide mobile nav menu after nav link click

问题描述

我在我的 wordpress 网站上加载了一个 ajax 页面，其中包含官方 216 和店面主题.

唯一的问题是，一旦单击链接并且新页面已被 ajax 脚本获取并加载，移动导航菜单就不会关闭.

我已经浏览了大多数其他类似的主题，并尝试了各种 jquery 片段，但未能使其正常工作.

26 上菜单切换按钮的代码是:

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

菜单容器html是:

<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帐户</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/">标签</a></li></ul>

从我对此事的研究来看，似乎有两种方法可以实现我所追求的目标.

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');} 别的 {$(this).attr('aria-expanded', 'true');}});});

2. 使用jquery点击函数触发切换按钮.

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

任何帮助将不胜感激！谢谢！

解决方案

试试这个

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

或

$(function () {$('#menu-main li>a').on('click', function (e) {//我设置了 $(".toggled-on") 因为我不知道哪个是你的主菜单//<div class="menu-main-container">//或者//<ul id="menu-main" class="primary-menu">$(".toggled-on").attr("aria-expanded","false");$(".toggled-on").removeClass(".toggled-on");});});

I have got an ajax page load working on my wordpress site with both the official twenty sixteen and storefront themes.

The only hitch is that the mobile nav menu does not close once a link has been clicked and the new page has been fetched and loaded by the ajax script.

I've looked through most of the other similar topics and tried various snippets of jquery but have not been able to get it working.

The code for the menu toggle button on twentysixteen is :

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

The menu container html is :

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

From my research into the matter it would seem that there is potentially two ways to achieve what I'm after.

1. Changing the aria attribute on click from expanded="true" to expanded="false" could do the trick?

I found this code snippet but have no idea how I would actually implement

$(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');
        }
    });
});

2. Use a jquery click function to trigger the toggle button.

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

Any help would be greatly appreciated! Thank you!

解决方案

try this

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

or

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

这篇关于单击导航链接后折叠/隐藏移动导航菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！