Блог

Главная - Вопросы по программированию - Подчеркивания (_s) изменить navigation.js кнопка переключения перемещения меню

Подчеркивания (_s) изменить navigation.js кнопка переключения перемещения меню

#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 (поскольку вы переместили туда кнопку), и он снова переключает класс 🙂

надеюсь, это кому-то поможет