我正在使用Wordpress的_s主题(我经常这样做),但在我的设计中,我想将菜单切换按钮移动到另一个div。我修改了navigation.js文件,但似乎无法让它显示菜单。
HTML(稍微简化以删除特定于站点的数据):
<header id="masthead" class="site-header">
<div id="site-branding" class="site-branding">
<h1 class="site-title"><a href="#" rel="home">Site Title</a></h1>
<button id="open-menu" class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><span class="dashicons dashicons-menu-alt"></span></button>
</div><!-- .site-branding -->
<nav id="site-navigation" class="main-navigation">
<div id="primary-menu" class="menu">
<ul class="nav-menu">
<li class="page_item page-item-1"><a href="#">Item One</a></li>
<li class="page_item page-item-2"><a href="#">Item Two</a></li>
</ul>
</div>
</nav><!-- #site-navigation -->
</header>
相关的javascript:
( function() {
const siteNavigation = document.getElementById( 'site-navigation' );
const container = document.getElementById('site-branding');
const button = container.getElementsByTagName( 'button' )[ 0 ];
button.addEventListener( 'click', function() {
siteNavigation.classList.toggle( 'toggled' );
if ( button.getAttribute( 'aria-expanded' ) === 'true' ) {
button.setAttribute( 'aria-expanded', 'false' );
} else {
button.setAttribute( 'aria-expanded', 'true' );
}
} );
}() );
我知道事件侦听器正在工作(如果添加alert或console.log项,它将按预期显示),但类列表没有更改,aria-expanded属性也没有更改。
有什么想法吗?
1条答案
按热度按时间qhhrdooz1#
我知道这是一个老问题,但我今天一直在挣扎,所以我想我帮助任何人仍然在挣扎。
在带下划线的原始navigation.js文件中,您可以在按钮代码的正下方找到另一个click事件侦听器:
因此,基本上每次单击按钮时,接下来发生的事情是您在siteNavigation容器外部单击(因为您将按钮移动到了那里),它将再次切换类:)
我希望这能帮助到一些人