我一直在尝试制作我的第二个wordpress网站，我仍然处于测试阶段，因为我通过在线课程制作了这个，但是进一步推动它并添加了我自己的特定元素。我一直在使用localhost通过mamp进行测试，因为我没有自己的服务器给你一个链接。我在网上浏览了几个关于咏叹调控件使用的论坛，过去几周我自己尝试了各种各样的东西，而且我根本没有找到解决方案。
该网站适用于移动设备/平板电脑，但在桌面版上进行测试时出现问题。选择菜单项时，我无法关闭子菜单。单击另一个菜单标题按预期工作。如果有人能提供任何非常值得赞赏的帮助，因为我仍然是一个非常初学者。
提前感谢您提供的任何帮助。
( 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;
}
}
function initMainNavigation( container ) {
// Add dropdown toggle that display child menu items.
container.find( '.menu-item-has-children > a, .page_item_has_children > a' ).after( '<button class="dropdown-toggle" aria-expanded="false">' + screenReaderText.expand + '</button>' );
// Toggle buttons and submenu items with active children menu items.
container.find( '.current-menu-ancestor > button' ).addClass( 'toggle-on' );
container.find( '.current-menu-ancestor > .sub-menu' ).addClass( 'toggled-on' );
container.find( '.dropdown-toggle' ).click( function( e ) {
var _this = $( this );
e.preventDefault();
_this.toggleClass( 'toggle-on' );
_this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
_this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
_this.html( _this.html() === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand );
} );
}
initMainNavigation( $( '.main-navigation' ) );
// Re-initialize the main navigation when it is updated, persisting any existing submenu expanded states.
$( document ).on( 'customize-preview-menu-refreshed', function( e, params ) {
if ( 'primary' === params.wpNavMenuArgs.theme_location ) {
initMainNavigation( params.newContainer );
// Re-sync expanded states from oldContainer.
params.oldContainer.find( '.dropdown-toggle.toggle-on' ).each(function() {
var containerId = $( this ).parent().prop( 'id' );
$( params.newContainer ).find( '#' + containerId + ' > .dropdown-toggle' ).triggerHandler( 'click' );
});
}
});
// Hide/show toggle button on scroll
var position, direction, previous;
$(window).scroll(function(){
if( $(this).scrollTop() >= position ){
direction = 'down';
if(direction !== previous){
$('.menu-toggle').addClass('hide');
previous = direction;
}
} else {
direction = 'up';
if(direction !== previous){
$('.menu-toggle').removeClass('hide');
previous = direction;
}
}
position = $(this).scrollTop();
});
// Wrap centered images in a new figure element
$( 'img.aligncenter' ).wrap( '<figure class="centered-image"></figure>');
} )( jQuery );.main-navigation {
clear: both;
display: block;
width: 100%;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 1em;
}
.main-navigation ul {
display: none;
list-style: none;
margin-left: 6em;
margin-bottom: 3em;
}
.main-navigation li {
position: relative;
}
.main-navigation ul ul {
display: none;
margin-left: 0.8em;
}
.main-navigation a {
/*z-index: 300; */
position: relative;
display: block;
padding: 0.8em 1em;
font-weight: 400;
text-decoration: none;
line-height: 1.6em;
color: white;
}
.main-navigation a:hover,
.main-navigation a:focus {
background: #fff;
color: #000;*/
background-color: transparent;
border-bottom: none;
}
.main-navigation a,
.main-navigation ul ul li:last-child a {
border-bottom: 1px solid white;
background: transparent;
color: #fff;
}
.main-navigation ul li:last-child a {
border-bottom: none;
}
.main-navigation ul .toggled-on {
display: block;
}
.main-navigation li { /* bottom menu buttom */
border-top: 1px solid #eaeaea;
border-top: 1px solid rgba(51, 51, 51, 0.1);
position: relative;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
font-weight: 700;
}
.main-navigation .nav-menu > ul > li:first-child,
.main-navigation .nav-menu > li:first-child {
border-top: 0;
}
.main-navigation .menu-item-has-children > a,
.main-navigation .page_item_has_children > a{
padding-right: 48px;
}
.no-js .main-navigation ul ul {
display: block;
}
.dropdown-toggle {
position: absolute;
height: 27px;
width: 27px;
top: 12px;
right: 6px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
padding: 0;
font-family: 'FontAwesome';
background-color: #045F66;
border: 1px solid #fff;
content: "";
color: #fff;
text-transform: lowercase; /* Stop screen readers from reading the text as capital letters */
}
.dropdown-toggle:after {
content: "\f078";
font-size: 14px;
line-height: 27px;
position: relative;
top: 0;
left: 1px;
width: 27px;
}
.dropdown-toggle:hover,
.dropdown-toggle:focus {
background-color: #fff;
color: #045F66;
}
.dropdown-toggle.toggle-on:after {
content: "\f077";
}
/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
display: block;
}
.menu-toggle {
position: fixed;
z-index: 300;
bottom: 1em;
left: 1em;
font-size: 1em;
text-transform: uppercase;
background-color: #00A3B9;
color: #fff;
border: solid 2px #fff;
transition: all ease-out 400ms;
}
.menu-toggle.hide {
bottom: -2.5em;
}
/*Make sure the button doesn't hide when menu is open. */
.toggled .menu-toggle.hide {
bottom: 1em;
}
.menu-toggle:hover,
.menu-toggle:focus {
text-decoration: underline;
}
@media screen and (min-width: 50em) {
.menu-toggle {
display: none;
}
.main-navigation ul {
display: block;
}
}
/* Hovering menu */
.main-navigation.toggled {
position: fixed;
bottom: 0;
padding: 1em;
z-index: 1;
}
.nav-menu {
padding: 1em;
margin-bottom: 0.5em;
/*background-color: #045F66;*/
background-color: #a8b8a5;
}
.main-navigation.toggled ul {
max-height: calc(100vh - 8em);
overflow-y: auto;
}
.main-navigation.toggled ul ul {
display: none;
}
.main-navigation.toggled ul ul.toggled-on,
.main-navigation.toggled ul ul.toggled-on > ul {
display: block;
}
/* Horizontal menu on wide screens */
@media screen and (min-width: 50em) {
.menu-toggle. {
display: none;
}
/* Position the menu in the header */
.main-navigation,
.main-navigation.toggled {
position: relative;
min-height: 3em;
max-width: 150em;
margin: 0 auto;
padding: 0 4em;
background-color: #045F66;
background-color: hsla(0, 0%, 0%, .7);
}
.nav-menu {
padding: 0.5em 0 0 0.5em;
background-color: transparent;
}
.main-navigation ul,
.main-navigation.toggled ul {
max-height: none;
padding-left: 0;
text-align: center;
}
.main-navigation.toggled ul {
overflow-y: hidden;
}
/* Display the menu items in a horizontal order */
.main-navigation li {
display: inline-block;
border: none;
}
/* Add an outline to the drop-down menus */
.main-navigation ul ul {
outline: 1px solid #333;
}
/* Left-align drop-down menu items */
.main-navigation li li {
display: block;
text-align: left;
background-color: #a8b8a5;
}
.main-navigation a,
.main-navigation ul ul li:last-child a {
border-bottom: none;
}
/* Add an outline on hovered and focused menu items */
.main-navigation a:hover,
.main-navigation a:focus {
background: transparent;
color: #fff;
text-decoration: underline;
outline: solid 1px #b3b3b3;
}
/* Create hover and focus contrast on drop-down items */
.main-navigation li li a:hover,
.main-navigation li li a:focus {
background: #eee;
color: #000;
text-decoration: none;
}
/* Position drop-down menus absolutely */
.main-navigation ul ul.toggled-on {
position: absolute;
width: 10em;
display: block;
z-index: 10;
margin-left: 0;
background: #000;
}
.main-navigation ul ul ul.toggled-on {
position: relative;
}
/* Indent 3rd level drop-down menus */
.main-navigation ul ul ul a {
padding-left: 2em;
}
/* Simplify the drop-down toggle */
.dropdown-toggle {
top: 11px;
right: 12px;
border: none;
}
.dropdown-toggle::after {
line-height: 27px;
width: 27px;
}
} <nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">Menu</button>
<div class="menu-main-container"><ul id="primary-menu" class="nav-menu"><li id="menu-item-199" class="home menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-197 current_page_item menu-item-199"><a title="Home" href="http://localhost:8888/plainly/">Home page</a></li>
<li id="menu-item-88" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-88"><a title="About" href="http://localhost:8888/plainly/?page_id=86">About</a></li>
<li id="menu-item-1985" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1985"><a href="http://localhost:8888/plainly/?page_id=1962">Boats</a>
<ul class="sub-menu">
<li id="menu-item-1988" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1988"><a href="http://localhost:8888/plainly/?page_id=15">Rubix (IOM)</a></li>
<li id="menu-item-2014" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2014"><a href="http://localhost:8888/plainly/?page_id=2011">RG65</a></li>
<li id="menu-item-2015" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2015"><a href="http://localhost:8888/plainly/?page_id=2008">One meter</a></li>
<li id="menu-item-2016" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2016"><a href="http://localhost:8888/plainly/?page_id=2005">Ten rater</a></li>
<li id="menu-item-2017" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2017"><a href="http://localhost:8888/plainly/?page_id=2002">Vane boats</a></li>
<li id="menu-item-2018" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2018"><a href="http://localhost:8888/plainly/?page_id=1999">Six meter</a></li>
<li id="menu-item-2019" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2019"><a href="http://localhost:8888/plainly/?page_id=1996">A-Boats</a></li>
</ul>
</li>
<li id="menu-item-1960" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1960"><a href="http://localhost:8888/plainly/?page_id=1953">Terms & Conditions</a></li>
</ul></div>
答案 0 :(得分：1)
注释掉以下块，它应该可以工作：
// Toggle buttons and submenu items with active children menu items.
container.find( '.current-menu-ancestor > button' ).addClass( 'toggle-on' );
container.find( '.current-menu-ancestor > .sub-menu' ).addClass( 'toggled-on' );