点击其他菜单
Other menu untoggle onclick
我正在为我的网站制作小型设备的汉堡按钮。在一页纸上,我需要两个在一起。我得到了按钮的这个功能,我复制了第二个按钮的功能,因为否则它不会同时切换这两个按钮。
现在,我想要的是,当你点击另一个按钮时,按钮可以返回到未切换状态。我不擅长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;
}
}
} )();
我想用"self"变量做点什么,但我不知道
这是菜单的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 -->
非常感谢你的帮助。
我还没有测试代码,但我相信这会奏效。我试着尽可能地删除代码。如果你有问题,请告诉我。
香草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;
}
}
})();
相关文章:
- 如何关闭所有其他子菜单
- 基于其他下拉菜单选择隐藏/显示下拉菜单
- 单击下拉菜单隐藏其他下拉菜单
- jQuery mmenu-打开子菜单时如何关闭所有其他子菜单
- 删除其他下拉菜单中的选定项目
- 如何在jquery中使用其他下拉菜单来设置下拉菜单的文本和值
- 下拉菜单的第一个选项不是一个选项;强制使用其他选项
- 主菜单JS在IE和Firefox中不起作用(其他菜单起作用)
- Wordpress 移动导航菜单:菜单出现在 iPhone 和其他移动设备上,但不是 iPad
- 当满足其他选择菜单值时取消隐藏选择菜单 - jQuery
- 用于导航的 Javascript 在某些子菜单上工作,但不能在其他子菜单上工作
- 在任一下拉列表中选择“其他”时,两个下拉菜单将打开一个文本框
- 移动菜单需要 Jquery 2.0.1,但其他站点脚本需要旧版本
- Jquery 向下滑动菜单,如果其他条件
- 基金会在屏幕外菜单打开时与其他类进行箭头切换
- 小部件上的菜单,在选择其他项目时单击关闭时打开
- 打开下拉菜单,单击页面上的其他位置
- HTML,Javascript,PHP - 选择菜单+其他输入框
- 如果在带有 JavaScript 的菜单中选择了其他字段,则显示其他字段
- 单击以关闭移动设备上的jQuery下拉菜单,同时保留其他行为