我为我的网站制作小型设备的汉堡包按钮。在一个页面上，我需要两个在彼此之下。我得到了按钮的这个功能，我复制了第二个按钮的功能，否则它不会切换它们。
现在我想要的是当您点击另一个按钮时按钮返回到未被遮挡的状态。我不是超级Javascript所以我想知道是否有人可以帮助我。这是我正在处理的网站页面：http://koekhuys.commteam.nl/bossche-koek/
( function() {
var container, button, menu, links, subMenus;
container = document.getElementById( 'site-navigation');
if ( ! container ) {
return;
}
button = container.getElementsByTagName( 'button' )[0];
if ( 'undefined' === typeof button ) {
return;
}
menu = container.getElementsByTagName( 'ul' )[0];
// Hide menu toggle button if menu is empty and return early.
if ( 'undefined' === typeof menu ) {
button.style.display = 'none';
return;
}
menu.setAttribute( 'aria-expanded', 'false' );
if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
menu.className += ' nav-menu';
}
button.onclick = function() {
if ( -1 !== container.className.indexOf( 'toggled' ) ) {
container.className = container.className.replace( ' toggled', '' );
button.setAttribute( 'aria-expanded', 'false' );
menu.setAttribute( 'aria-expanded', 'false' );
} else {
container.className += ' toggled';
button.setAttribute( 'aria-expanded', 'true' );
menu.setAttribute( 'aria-expanded', 'true' );
}
};
// Get all the link elements within the menu.
links = menu.getElementsByTagName( 'a' );
subMenus = menu.getElementsByTagName( 'ul' );
// Set menu items with submenus to aria-haspopup="true".
for ( var i = 0, len = subMenus.length; i < len; i++ ) {
subMenus[i].parentNode.setAttribute( 'aria-haspopup', 'true' );
}
// Each time a menu link is focused or blurred, toggle focus.
for ( i = 0, len = links.length; i < len; i++ ) {
links[i].addEventListener( 'focus', toggleFocus, true );
links[i].addEventListener( 'blur', toggleFocus, true );
}
/**
* Sets or removes .focus class on an element.
*/
function toggleFocus() {
var self = this;
// Move up through the ancestors of the current link until we hit .nav-menu.
while ( -1 === self.className.indexOf( 'nav-menu' ) ) {
// On li elements toggle the class .focus.
if ( 'li' === self.tagName.toLowerCase() ) {
if ( -1 !== self.className.indexOf( 'focus' ) ) {
self.className = self.className.replace( ' focus', '' );
} else {
self.className += ' focus';
}
}
self = self.parentElement;
}
}
} )();
这是另一个功能。我只是复制了它并添加了另一个菜单的id。
( function() {
var container, button, menu, links, subMenus;
container = document.getElementById( 'product-navigation');
if ( ! container ) {
return;
}
button = container.getElementsByTagName( 'button' )[0];
if ( 'undefined' === typeof button ) {
return;
}
menu = container.getElementsByTagName( 'ul' )[0];
// Hide menu toggle button if menu is empty and return early.
if ( 'undefined' === typeof menu ) {
button.style.display = 'none';
return;
}
menu.setAttribute( 'aria-expanded', 'false' );
if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
menu.className += ' nav-menu';
}
button.onclick = function() {
if ( -1 !== container.className.indexOf( 'toggled' ) ) {
container.className = container.className.replace( ' toggled', '' );
button.setAttribute( 'aria-expanded', 'false' );
menu.setAttribute( 'aria-expanded', 'false' );
} else {
container.className += ' toggled';
button.setAttribute( 'aria-expanded', 'true' );
menu.setAttribute( 'aria-expanded', 'true' );
}
};
// Get all the link elements within the menu.
links = menu.getElementsByTagName( 'a' );
subMenus = menu.getElementsByTagName( 'ul' );
// Set menu items with submenus to aria-haspopup="true".
for ( var i = 0, len = subMenus.length; i < len; i++ ) {
subMenus[i].parentNode.setAttribute( 'aria-haspopup', 'true' );
}
// Each time a menu link is focused or blurred, toggle focus.
for ( i = 0, len = links.length; i < len; i++ ) {
links[i].addEventListener( 'focus', toggleFocus, true );
links[i].addEventListener( 'blur', toggleFocus, true );
}
/**
* Sets or removes .focus class on an element.
*/
function toggleFocus() {
var self = this;
// Move up through the ancestors of the current link until we hit .nav-menu.
while ( -1 === self.className.indexOf( 'nav-menu' ) ) {
// On li elements toggle the class .focus.
if ( 'li' === self.tagName.toLowerCase() ) {
if ( -1 !== self.className.indexOf( 'focus' ) ) {
self.className = self.className.replace( ' focus', '' );
} else {
self.className += ' focus';
}
}
self = self.parentElement;
}
}
} )();
我想用“自我”变量做点什么，但我没有知识分子
这是菜单
的HTML<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"></button>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
</nav><!-- #site-navigation -->
其他菜单：
<nav id="product-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"></button>
<?php wp_nav_menu( array( 'theme_location' => 'product', 'menu_id' => 'product-menu' ) ); ?>
</nav><!-- #site-navigation -->
非常感谢您的帮助。
答案 0 :(得分：1)
我没有测试过代码，但我相信这会有效。我试图尽可能地干掉代码。如果您有疑问，请告诉我。
Vanilla JS
(function(){
// Boolean Checks to stop propagation
var STOPproductNav = false;
var STOPsiteNav = false;
// Grab Container Handles
var productNav = document.getElementById('product-navigation');
var siteNav = document.getElementById('site-navigation');
if ( !productNav ) { STOPproductNav = true };
if ( !siteNav ) { STOPsiteNav = true };
// Grab Button Handle
var btnproductNav = productNav.getElementsByTagName( 'button' )[0];
var btnsiteNav = siteNav.getElementsByTagName( 'button' )[0];
if ( typeof btnproductNav === 'undefined') { STOPproductNav = true };
if ( typeof btnsiteNav === 'undefined') { STOPsiteNav = true };
// Grab UL Handle
ulproductNav = productNav.getElementsByTagName( 'ul' )[0];
ulsiteNav = siteNav.getElementsByTagName( 'ul' )[0];
// Hide Menu Button if menu doesn't exist
if( typeof ulproductNav === 'undefined' ){
btnproductNav.style.display = 'none';
STOPproductNav = true;
};
if( typeof ulsiteNav === 'undefined' ){
btnsiteNav.style.display = 'none';
STOPsiteNav = true;
};
// Set default attributs if the menu exists
if( !STOPproductNav ) { initNavMenu( ulproductNav ); }
if( !STOPsiteNav ) { initNavMenu( ulsiteNav ); }
btnproductNav.onclick = function(){
// Hide Opposite menu if it exists
if ( !STOPsiteNav ){
siteNav.className = siteNav.className.replace( ' toggled', '' );
btnsiteNav.setAttribute( 'aria-expanded', 'false' );
ulsiteNav.setAttribute( 'aria-expanded', 'false' );
}
// Call Toggle Menu
toggleMenu(productNav,btnproductNav,ulsiteNav);
}
btnsiteNav.onclick = function(){
// Hide Opposite if it exists
if ( !STOPproductNav ){
productNav.className = siteNav.className.replace( ' toggled', '' );
btnproductNav.setAttribute( 'aria-expanded', 'false' );
ulproductNav.setAttribute( 'aria-expanded', 'false' );
}
// Call Toggle Menu
toggleMenu(siteNav,btnsiteNav,ulsiteNav);
}
if( !STOPproductNav ) { focusFix( ulproductNav ); }
if( !STOPsiteNav ) { focusFix( ulsiteNav ); }
// Toggle Menu
function toggleMenu(containerID, buttonID, menuID) {
if ( -1 !== containerID.className.indexOf( 'toggled' ) ) {
containerID.className = containerID.className.replace( ' toggled', '' );
buttonID.setAttribute( 'aria-expanded', 'false' );
menuID.setAttribute( 'aria-expanded', 'false' );
} else {
containerID.className += ' toggled';
buttonID.setAttribute( 'aria-expanded', 'true' );
menuID.setAttribute( 'aria-expanded', 'true' );
}
};
// Set default attr and add nav-menu to class
function initNavMenu(menuID){
menuID.setAttribute( 'aria-expanded', 'false' );
if ( -1 === menuID.className.indexOf( 'nav-menu' ) ) {
menuID.className += ' nav-menu';
};
};
// focus fix
function focusFix(menuID){
// Get all the link elements within the menu.
links = menuID.getElementsByTagName( 'a' );
subMenus = menuID.getElementsByTagName( 'ul' );
// Set menu items with submenus to aria-haspopup="true".
for ( var i = 0, len = subMenus.length; i < len; i++ ) {
subMenus[i].parentNode.setAttribute( 'aria-haspopup', 'true' );
}
// Each time a menu link is focused or blurred, toggle focus.
for ( i = 0, len = links.length; i < len; i++ ) {
links[i].addEventListener( 'focus', toggleFocus, true );
links[i].addEventListener( 'blur', toggleFocus, true );
}
};
// Toggle Focus
function toggleFocus() {
var self = this;
// Move up through the ancestors of the current link until we hit .nav-menu.
while ( -1 === self.className.indexOf( 'nav-menu' ) ) {
// On li elements toggle the class .focus.
if ( 'li' === self.tagName.toLowerCase() ) {
if ( -1 !== self.className.indexOf( 'focus' ) ) {
self.className = self.className.replace( ' focus', '' );
} else {
self.className += ' focus';
}
}
self = self.parentElement;
}
}
})();