I'm trying to get my hamburger menu to close after clicking a nav link on my one page website at alecbwd.com/testing/jay . The website uses the Infinity Pro Genesis theme. Here's the JavaScript file for the responsive menu:
(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();
}
});
})(document, jQuery);
Thank you!
Update: I still don't have an solution to this -- this is one of my first questions here, am I doing it right?
I didn't test it but this javascript should do the trick
$(function(){
$('#genesis-nav-primary li').click(function()
{
$('nav.nav-primary').slideToggle('fast');
});
});
So your javascript file will looks like this :
(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);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.