#javascript #wordpress #underscores-wp
#javascript #wordpress #подчеркивания-wp
Вопрос:
Я использую тему _s из WordPress (что я часто делаю), но в моем дизайне я хочу переместить кнопку переключения меню в другой 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' );
}
} );
}() );
Я знаю, что прослушиватель событий работает (если я добавлю оповещение или консоль.элемент журнала, он отображается как ожидалось), но список классов не изменяется, как и атрибут aria-expanded.
Есть мысли?
Комментарии:
1. Можете ли вы показать нам CSS для .toggled? Может быть, это все еще зависит от чего-то, установленного в том, откуда оно изначально взялось.
2. проверьте свой css, потому что это работает: js fidle
3. @robert да, это переключение переключаемого класса, но мы не знаем, почему это не показывает меню, не так ли? Возможно, я что-то пропустил.
4. это проблема css. id=»sideNavigation» имеет класс «main-navigation», возможно, это так… покажите нам код css, отвечающий за основную навигацию, переключение и #sideNavigation проблема где-то там
5. @robert спасибо за это. Вы правы, что это работает в скрипке, но не на сайте. Я понятия не имею, почему, но «переключаемый» класс не добавляет / удаляет по щелчку мыши на моем активном сайте. В этом случае проблема не в CSS, потому что переключение класса не работает.
Ответ №1:
Я знаю, что это старый вопрос, но я боролся с ним сегодня, поэтому я подумал, что помогу кому-нибудь, кто все еще борется с этим.
В оригинале подчеркивания navigation.js файл вы можете найти другой прослушиватель событий щелчка чуть ниже кода кнопки:
document.addEventListener( 'click', function( event ) {
const isClickInside = siteNavigation.contains( event.target );
if ( ! isClickInside ) {
siteNavigation.classList.remove( 'toggled' );
button.setAttribute( 'aria-expanded', 'false' );
}} );
таким образом, в основном каждый раз, когда вы нажимаете кнопку, следующее, что происходит, это то, что вы нажимаете за пределы контейнера siteNavigation (поскольку вы переместили туда кнопку), и он снова переключает класс 🙂
надеюсь, это кому-то поможет