我正在通过在Wordpress中编辑Adonis免费主题（捕获主题）的代码来构建网站。主要导航假设是在指定的断点处切换为汉堡菜单按钮（确实如此），但是菜单实际上并未打开。没有应用从jQuery函数添加的类。当我在chrome开发人员模式下手动应用它们时，它们会打开。
Link到站点。
我包含了jQuery，CSS和HTML。我尝试在其他位置使用菜单，并删除我所做的css / php编辑，但无济于事。
代码：
/* Menu */
var body, masthead, menuToggle, siteNavigation, socialNavigation, siteHeaderMenu, resizeTimer;
function initMainNavigation( container ) {
// Add dropdown toggle that displays child menu items.
var dropdownToggle = $( '<button />', { 'class': 'dropdown-toggle', 'aria-expanded': false })
.append( adonisScreenReaderText.icon )
.append( $( '<span />', { 'class': 'screen-reader-text', text: adonisScreenReaderText.expand }) );
container.find( '.menu-item-has-children > a' ).after( dropdownToggle );
// Toggle buttons and submenu items with active children menu items.
container.find( '.current-menu-ancestor > button' ).addClass( 'toggled-on' );
container.find( '.current-menu-ancestor > .sub-menu' ).addClass( 'toggled-on' );
// Add menu items with submenus to aria-haspopup="true".
container.find( '.menu-item-has-children' ).attr( 'aria-haspopup', 'true' );
container.find( '.dropdown-toggle' ).click( function( e ) {
var _this = $( this ),
screenReaderSpan = _this.find( '.screen-reader-text' );
e.preventDefault();
_this.toggleClass( 'toggled-on' );
_this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
// jscs:disable
_this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
// jscs:enable
screenReaderSpan.text( screenReaderSpan.text() === adonisScreenReaderText.expand ? adonisScreenReaderText.collapse : adonisScreenReaderText.expand );
} );
}
initMainNavigation( $( '.main-navigation' ) );
masthead = $( '#masthead' );
menuToggle = masthead.find( '.menu-toggle' );
siteHeaderMenu = masthead.find( '#site-header-menu' );
siteNavigation = masthead.find( '#site-navigation' );
socialNavigation = masthead.find( '#social-navigation' );
// Enable menuToggle.
( function() {
// Adds our overlay div.
$( '.below-site-header' ).prepend( '<div class="overlay">' );
// Assume the initial scroll position is 0.
var scroll = 0;
// Return early if menuToggle is missing.
if ( ! menuToggle.length ) {
return;
}
// Add an initial values for the attribute.
menuToggle.add( siteNavigation ).attr( 'aria-expanded', 'false' );
menuToggle.add( socialNavigation ).attr( 'aria-expanded', 'false' );
// Wait for a click on one of our menu toggles.
menuToggle.on( 'click.adonis', function() {
// Assign this (the button that was clicked) to a variable.
var button = this;
// Gets the actual menu (parent of the button that was clicked).
var menu = $( this ).parents( '.menu-wrapper' );
// Remove selected classes from other menus.
$( '.menu-toggle' ).not( button ).removeClass( 'selected' );
$( '.menu-wrapper' ).not( menu ).removeClass( 'is-open' );
// Toggle the selected classes for this menu.
$( button ).toggleClass( 'selected' );
$( menu ).toggleClass( 'is-open' );
// Is the menu in an open state?
var is_open = $( menu ).hasClass( 'is-open' );
// If the menu is open and there wasn't a menu already open when clicking.
if ( is_open && ! jQuery( 'body' ).hasClass( 'menu-open' ) ) {
// Get the scroll position if we don't have one.
if ( 0 === scroll ) {
scroll = $( 'body' ).scrollTop();
}
// Add a custom body class.
$( 'body' ).addClass( 'menu-open' );
// If we're closing the menu.
} else if ( ! is_open ) {
$( 'body' ).removeClass( 'menu-open' );
$( 'body' ).scrollTop( scroll );
scroll = 0;
}
} );/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.main-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
}
.main-navigation li {
margin: 0;
position: relative;
}
.menu-social-container {
padding: 13px 15px;
}
.main-navigation a {
display: block;
font-weight: 400;
line-height: 1.5;
text-decoration: none;
}
.main-navigation a,
.search-container {
padding: 16px 30px;
}
.menu-inside-wrapper {
-webkit-box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.2 );
-moz-box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.2 );
box-shadow: 0 3px 3px rgba( 0, 0, 0, 0.2 );
}
.main-navigation {
border: none;
}
.main-navigation ul ul a {
font-size: 14px;
font-size: 0.875rem;
}
.main-navigation ul.toggled-on {
box-shadow: none;
}
.main-navigation ul.toggled-on li:last-child {
border-bottom: none;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
left: 20px;
}
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
left: 100%;
}
.main-navigation ul ul .current_page_item > a,
.main-navigation ul ul .current-menu-item > a {
font-weight: 600;
}
.main-navigation li.menu-item-has-children ul a {
padding: 15px 50px 15px 40px;
}
.main-navigation li.menu-item-has-children ul ul a {
padding-left: 50px;
}
.menu-wrapper {
display: block;
}
#primary-menu-wrapper {
float: left;
}
#social-search-wrapper {
float: right;
}
.menu-inside-wrapper {
display: none;
position: absolute;
width: 100%;
top: 100%;
z-index: 199;
right: 0;
}
#social-search-wrapper .menu-inside-wrapper {
max-width: 360px;
}
.is-open .menu-inside-wrapper {
display: block;
}
body.menu-open {
overflow-y: scroll;
width: 100%;
}
.menu-toggle-wrapper {
padding: 10px;
}
.menu-toggle {
background-color: transparent;
border: none;
font-weight: 400;
line-height: 1.5;
padding: 10px 15px;
}
.menu-toggle:hover,
.menu-toggle:focus,
.menu-toggle.selected {
border:none;
}
.selected.menu-toggle .icon-bars,
.menu-toggle .icon-close,
.selected.menu-toggle .icon-search {
display: none;
}
.selected.menu-toggle .icon-close {
display: inline-block;
}
#social-search-toggle .icon {
margin-right: 0;
}
#social-search-wrapper .menu-toggle {
-webkit-border-radius: 36px;
border-radius: 36px;
display: inline-block;
height: 36px;
padding: 0;
text-align: center;
width: 36px;
}
/* Dropdown Toggle */
.dropdown-toggle {
background-color: transparent;
border: 0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
display: block;
font-size: 20px;
font-size: 1.25rem;
right: 0;
line-height: 1.5;
margin: 0 auto;
padding: 13px;
position: absolute;
text-shadow: none;
top: 0;
}
.dropdown-toggle:hover,
.dropdown-toggle:focus {
border: 0;
background: transparent;
}
.dropdown-toggle:focus {
outline: thin dotted;
}
.dropdown-toggle.toggled-on .icon {
-ms-transform: rotate(-180deg); /* IE 9 */
-webkit-transform: rotate(-180deg); /* Chrome, Safari, Opera */
transform: rotate(-180deg);
}
.main-navigation .menu-item-has-children > a > .icon,
.main-navigation .page_item_has_children > a > .icon,
.main-navigation ul a > .icon {
display: none;
}
.main-navigation ul ul {
display: none;
}
.main-navigation ul .toggled-on {
display: block;
}
#social-search-wrapper .menu-toggle-wrapper {
float: left;
padding: 14px 20px;
}
.menu-label {
display: inline-block;
}
.navigation-modern #social-search-wrapper .menu-inside-wrapper .social-navigation,
.navigation-classic .mobile-social-search {
display: none;
}<body class="home page-template-default page page-id-2 tribe-js tribe-bar-is-disabled fluid-layout navigation-classic absolute-header no-sidebar content-width-layout" <div="">
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content">Skip to content</a>
<header id="masthead" class="site-header">
<p><a href="2018test.proarte.org"><img style="float: left;" src="http://2018test.proarte.org/wp-content/uploads/2018/08/logo-red-whitewordmark-paco.png" width="250px"></a></p>
<div class="wrapper">
<div id="site-header-main">
<div id="site-header-menu" class="site-header-menu">
<div id="primary-menu-wrapper" class="menu-wrapper">
<div class="menu-toggle-wrapper">
<button id="primary-menu-toggle" class="menu-toggle" aria-controls="top-menu" aria-expanded="false"><svg class="icon icon-bars" aria-hidden="true" role="img"> <use href="#icon-bars" xlink:href="#icon-bars"></use> </svg><svg class="icon icon-close" aria-hidden="true" role="img"> <use href="#icon-close" xlink:href="#icon-close"></use> </svg><span class="menu-label">Menu</span></button>
</div><!-- .menu-toggle-wrapper -->
<div class="menu-inside-wrapper">
<nav id="site-navigation" class="main-navigation custom-primary-menu" role="navigation" aria-label="Primary Menu">
<div class="menu-main-navigation-container"><ul id="menu-main-navigation" class="primary-menu"><li id="menu-item-368" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-368" aria-haspopup="true"><a href="http://2018test.proarte.org/?page_id=10">About<svg class="icon icon-caret-down" aria-hidden="true" role="img"> <use href="#icon-caret-down" xlink:href="#icon-caret-down"></use> </svg></a><button class="dropdown-toggle" aria-expanded="false"><svg class="icon icon-caret-down" aria-hidden="true" role="img"> <use href="#icon-caret-down" xlink:href="#icon-caret-down"></use> </svg><span class="svg-fallback icon-caret-down"></span><span class="screen-reader-text">expand child menu</span></button>
<ul class="sub-menu">
<li id="menu-item-303" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-303"><a href="http://2018test.proarte.org/?page_id=292">History</a></li>
</ul>
</li>
<li id="menu-item-226" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-226" aria-haspopup="true"><a href="http://2018test.proarte.org/?page_id=224">Season<svg class="icon icon-caret-down" aria-hidden="true" role="img"> <use href="#icon-caret-down" xlink:href="#icon-caret-down"></use> </svg></a><button class="dropdown-toggle" aria-expanded="false"><svg class="icon icon-caret-down" aria-hidden="true" role="img"> <use href="#icon-caret-down" xlink:href="#icon-caret-down"></use> </svg><span class="svg-fallback icon-caret-down"></span><span class="screen-reader-text">expand child menu</span></button>
<ul class="sub-menu">
<li id="menu-item-697" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-697"><a href="http://2018test.proarte.org/?page_id=321">Season and Tickets</a></li>
<li id="menu-item-305" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-305"><a href="http://2018test.proarte.org/?page_id=288">Subscribe</a></li>
<li id="menu-item-287" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-287"><a href="http://2018test.proarte.org/?page_id=285">Salon Series</a></li>
</ul>
</li>
<li id="menu-item-494" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-494" aria-haspopup="true"><a href="http://2018test.proarte.org/?page_id=488">We Are Pro Arte<svg class="icon icon-caret-down" aria-hidden="true" role="img"> <use href="#icon-caret-down" xlink:href="#icon-caret-down"></use> </svg></a><button class="dropdown-toggle" aria-expanded="false"><svg class="icon icon-caret-down" aria-hidden="true" role="img"> <use href="#icon-caret-down" xlink:href="#icon-caret-down"></use> </svg><span class="svg-fallback icon-caret-down"></span><span class="screen-reader-text">expand child menu</span></button>
<ul class="sub-menu">
<li id="menu-item-302" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-302"><a href="http://2018test.proarte.org/?page_id=294">Musicians</a></li>
<li id="menu-item-301" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-301"><a href="http://2018test.proarte.org/?page_id=296">Staff and Board of Trustees</a></li>
</ul>
</li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-19" aria-haspopup="true"><a href="http://2018test.proarte.org/?page_id=14">Support<svg class="icon icon-caret-down" aria-hidden="true" role="img"> <use href="#icon-caret-down" xlink:href="#icon-caret-down"></use> </svg></a><button class="dropdown-toggle" aria-expanded="false"><svg class="icon icon-caret-down" aria-hidden="true" role="img"> <use href="#icon-caret-down" xlink:href="#icon-caret-down"></use> </svg><span class="svg-fallback icon-caret-down"></span><span class="screen-reader-text">expand child menu</span></button>
<ul class="sub-menu">
<li id="menu-item-304" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-304"><a href="http://2018test.proarte.org/?page_id=290">Donate</a></li>
<li id="menu-item-300" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-300"><a href="http://2018test.proarte.org/?page_id=298">Volunteer</a></li>
</ul>
</li>
</ul></div> </nav><!-- .main-navigation -->