在锚链接单击时折叠 Wordpress 移动菜单

Question

单击我的单页网站alecbwd.com/testing/jay 上的导航链接后，我正试图关闭我的汉堡菜单。该网站使用 Infinity Pro Genesis 主题。这是响应式菜单的 JavaScript 文件：

(function(document, $, undefined) {

// Add js body class when javascript is enabled
$('body').addClass('js');

// Add accessibility menu
'use strict';

var infinity = {},
    mainMenuButtonClass = 'menu-toggle',
    subMenuButtonClass = 'sub-menu-toggle';

infinity.init = function() {
    var toggleButtons = {
        menu: $('<button />', {
                'class': mainMenuButtonClass,
                'aria-expanded': false,
                'aria-pressed': false,
                'role': 'button'
            })
            .append(infinity.params.mainMenu),
        submenu: $('<button />', {
                'class': subMenuButtonClass,
                'aria-expanded': false,
                'aria-pressed': false,
                'role': 'button'
            })
            .append($('<span />', {
                'class': 'screen-reader-text',
                text: infinity.params.subMenu
            }))
    };
    $('.nav-primary').before(toggleButtons.menu); // add the main nav buttons
    $('nav .sub-menu').before(toggleButtons.submenu); // add the submenu nav buttons
    $('.' + mainMenuButtonClass).each(_addClassID);
    $('.' + mainMenuButtonClass).addClass('ionicons-before ion-drag');
    $('.' + subMenuButtonClass).addClass('ionicons-before ion-chevron-down');
    $(window).on('resize.infinity', _doResize).triggerHandler('resize.infinity');
    $('.' + mainMenuButtonClass).on('click.infinity-mainbutton', _mainmenuToggle);
    $('.' + subMenuButtonClass).on('click.infinity-subbutton', _submenuToggle);
};

// add nav class and ID to related button
function _addClassID() {
    var $this = $(this),
        nav = $this.next('nav'),
        id = 'class';
    $this.addClass($(nav).attr('class'));
    if ($(nav).attr('id')) {
        id = 'id';
    }
    $this.attr('id', 'mobile-' + $(nav).attr(id));
}

// Change Skiplinks and Superfish
function _doResize() {
    var buttons = $('button[id^=mobile-]').attr('id');
    if (typeof buttons === 'undefined') {
        return;
    }
    _superfishToggle(buttons);
    _changeSkipLink(buttons);
    _maybeClose(buttons);
}

/**
 * action to happen when the main menu button is clicked
 */
function _mainmenuToggle() {
    var $this = $(this);
    _toggleAria($this, 'aria-pressed');
    _toggleAria($this, 'aria-expanded');
    $this.toggleClass('activated');
    $('nav.nav-primary').slideToggle('fast'); //changed to .nav-primary since we're not toggling .nav-secondary
}

/**
 * action for submenu toggles
 */
function _submenuToggle() {

    var $this = $(this),
        others = $this.closest('.menu-item').siblings();
    _toggleAria($this, 'aria-pressed');
    _toggleAria($this, 'aria-expanded');
    $this.toggleClass('activated');
    $this.next('.sub-menu').slideToggle('fast');

    others.find('.' + subMenuButtonClass).removeClass('activated').attr('aria-pressed', 'false');
    others.find('.sub-menu').slideUp('fast');

}

/**
 * activate/deactivate superfish
 */
function _superfishToggle(buttons) {
    if (typeof $('.js-superfish').superfish !== 'function') {
        return;
    }
    if ('none' === _getDisplayValue(buttons)) {
        $('.js-superfish').superfish({
            'delay': 100,
            'animation': {
                'opacity': 'show',
                'height': 'show'
            },
            'dropShadows': false
        });
    } else {
        $('.js-superfish').superfish('destroy');
    }
}

/**
 * modify skip links to match mobile buttons
 */
function _changeSkipLink(buttons) {
    var startLink = 'genesis-nav',
        endLink = 'mobile-genesis-nav';
    if ('none' === _getDisplayValue(buttons)) {
        startLink = 'mobile-genesis-nav';
        endLink = 'genesis-nav';
    }
    $('.genesis-skip-link a[href^="#' + startLink + '"]').each(function() {
        var link = $(this).attr('href');
        link = link.replace(startLink, endLink);
        $(this).attr('href', link);
    });
}

function _maybeClose(buttons) {
    if ('none' !== _getDisplayValue(buttons)) {
        return;
    }
    $('.menu-toggle, .sub-menu-toggle')
        .removeClass('activated')
        .attr('aria-expanded', false)
        .attr('aria-pressed', false);
    $('nav, .sub-menu')
        .attr('style', '');
}

/**
 * generic function to get the display value of an element
 * @param  {id} $id ID to check
 * @return {string}     CSS value of display property
 */
function _getDisplayValue($id) {
    var element = document.getElementById($id),
        style = window.getComputedStyle(element);
    return style.getPropertyValue('display');
}

/**
 * Toggle aria attributes
 * @param  {button} $this     passed through
 * @param  {aria-xx} attribute aria attribute to toggle
 * @return {bool}           from _ariaReturn
 */
function _toggleAria($this, attribute) {
    $this.attr(attribute, function(index, value) {
        return 'false' === value;
    });
}

$(document).ready(function() {

    infinity.params = typeof InfinityL10n === 'undefined' ? '' : InfinityL10n;

    if (typeof infinity.params !== 'undefined') {
        infinity.init();
    }

});

})(文档，jQuery);

谢谢！

更新：我仍然没有解决方案 - 这是我在这里的第一个问题，我做得对吗？

Answer 1

我没有测试它，但这个 javascript 应该可以解决问题

$(function(){
$('#genesis-nav-primary li').click(function()
  {
    $('nav.nav-primary').slideToggle('fast');
   });
});

所以您的 javascript 文件将如下所示：

(function(document, $, undefined) {

// Add js body class when javascript is enabled
$('body').addClass('js');

// Add accessibility menu
'use strict';

var infinity = {},
mainMenuButtonClass = 'menu-toggle',
subMenuButtonClass = 'sub-menu-toggle';

infinity.init = function() {
var toggleButtons = {
    menu: $('<button />', {
            'class': mainMenuButtonClass,
            'aria-expanded': false,
            'aria-pressed': false,
            'role': 'button'
        })
        .append(infinity.params.mainMenu),
    submenu: $('<button />', {
            'class': subMenuButtonClass,
            'aria-expanded': false,
            'aria-pressed': false,
            'role': 'button'
        })
        .append($('<span />', {
            'class': 'screen-reader-text',
            text: infinity.params.subMenu
        }))
};
$('.nav-primary').before(toggleButtons.menu); // add the main nav buttons
$('nav .sub-menu').before(toggleButtons.submenu); // add the submenu nav buttons
$('.' + mainMenuButtonClass).each(_addClassID);
$('.' + mainMenuButtonClass).addClass('ionicons-before ion-drag');
$('.' + subMenuButtonClass).addClass('ionicons-before ion-chevron-down');
$(window).on('resize.infinity', 
_doResize).triggerHandler('resize.infinity');
$('.' + mainMenuButtonClass).on('click.infinity-mainbutton', _mainmenuToggle);
$('.' + subMenuButtonClass).on('click.infinity-subbutton', _submenuToggle);
};

// add nav class and ID to related button
function _addClassID() {
var $this = $(this),
    nav = $this.next('nav'),
    id = 'class';
$this.addClass($(nav).attr('class'));
if ($(nav).attr('id')) {
    id = 'id';
}
$this.attr('id', 'mobile-' + $(nav).attr(id));
}

// Change Skiplinks and Superfish
function _doResize() {
var buttons = $('button[id^=mobile-]').attr('id');
if (typeof buttons === 'undefined') {
    return;
}
_superfishToggle(buttons);
_changeSkipLink(buttons);
_maybeClose(buttons);
}

/**
 * action to happen when the main menu button is clicked
 */
function _mainmenuToggle() {
var $this = $(this);
_toggleAria($this, 'aria-pressed');
_toggleAria($this, 'aria-expanded');
$this.toggleClass('activated');
$('nav.nav-primary').slideToggle('fast'); //changed to .nav-primary since we're not toggling .nav-secondary
}

/**
 * action for submenu toggles
 */
function _submenuToggle() {

 var $this = $(this),
    others = $this.closest('.menu-item').siblings();
_toggleAria($this, 'aria-pressed');
_toggleAria($this, 'aria-expanded');
$this.toggleClass('activated');
$this.next('.sub-menu').slideToggle('fast');

others.find('.' + subMenuButtonClass).removeClass('activated').attr('aria-pressed', 'false');
others.find('.sub-menu').slideUp('fast');

}

/**
 * activate/deactivate superfish
 */
function _superfishToggle(buttons) {
if (typeof $('.js-superfish').superfish !== 'function') {
    return;
}
if ('none' === _getDisplayValue(buttons)) {
    $('.js-superfish').superfish({
        'delay': 100,
        'animation': {
            'opacity': 'show',
            'height': 'show'
        },
        'dropShadows': false
    });
} else {
    $('.js-superfish').superfish('destroy');
}
}

/**
 * modify skip links to match mobile buttons
 */
function _changeSkipLink(buttons) {
var startLink = 'genesis-nav',
    endLink = 'mobile-genesis-nav';
if ('none' === _getDisplayValue(buttons)) {
    startLink = 'mobile-genesis-nav';
    endLink = 'genesis-nav';
}
$('.genesis-skip-link a[href^="#' + startLink + '"]').each(function() {
    var link = $(this).attr('href');
    link = link.replace(startLink, endLink);
    $(this).attr('href', link);
});
}

function _maybeClose(buttons) {
if ('none' !== _getDisplayValue(buttons)) {
    return;
}
$('.menu-toggle, .sub-menu-toggle')
    .removeClass('activated')
    .attr('aria-expanded', false)
    .attr('aria-pressed', false);
$('nav, .sub-menu')
    .attr('style', '');
}

/**
 * generic function to get the display value of an element
 * @param  {id} $id ID to check
 * @return {string}     CSS value of display property
 */
function _getDisplayValue($id) {
var element = document.getElementById($id),
    style = window.getComputedStyle(element);
return style.getPropertyValue('display');
}

/**
 * Toggle aria attributes
 * @param  {button} $this     passed through
 * @param  {aria-xx} attribute aria attribute to toggle
 * @return {bool}           from _ariaReturn
 */
function _toggleAria($this, attribute) {
$this.attr(attribute, function(index, value) {
    return 'false' === value;
});
}

$(function(){
$('#genesis-nav-primary li').click(function()
  {
    $('nav.nav-primary').slideToggle('fast');
   });
});
$(document).ready(function() {

infinity.params = typeof InfinityL10n === 'undefined' ? '' : InfinityL10n;

if (typeof infinity.params !== 'undefined') {
    infinity.init();
}

});
})(document, jQuery);