Добавление активных ссылок и JQuery слайд-переключатель для пользовательской навигации AJAX WordPress при перезагрузке страницы

Question

У меня полностью отрегулированная страница WordPress, и я добавляю свою навигацию в WordPress через wp_nav_menu()

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

WordPress выводит следующую HTML-структуру:

<div class="menu-header">
 <ul class="menu" id="menu-wordpress-navigation">
  <li class="menu-item menu-item-type-post_type menu-item-1271" id="menu-item-1271">
   <a href="#">Navigation 1</a>
   <ul class="sub-menu" style="display: none;">
    <li class="menu-item menu-item-type-post_type menu-item-1246" id="menu-item-1246"><a href="#">Subnavigation 1</a></li>
   </ul>
  </li>
  <li class="menu-item menu-item-type-post_type menu-item-1275" id="menu-item-1275">
  <a href="#" title="silly">Navigation 2</a>
  </li>
    </ul>
</div>

Переключатели My Navigationего подменю с Jquery и следующим фрагментом кода.

   // close all subnavigation
    jQuery('ul.sub-menu').hide();

    // navi toggle
    jQuery('ul.menu li').click(function(){
     jQuery(this).siblings().find("ul.sub-menu").slideUp('normal');
        if (jQuery(this).find('ul.sub-menu').is(':hidden') == true) {
            jQuery(this).find('ul.sub-menu').slideDown('normal');
        }   
    });

Пока все хорошо.Все отлично работает

Теперь я хочу добавить активные цветовые состояния и сдвинуть правильную поднавигатку при полной перезагрузке страницы и не могу понять, как получить определенные селекторы для всех элементов.Вы можете добавить атрибут «title» в WP Backend, и я подумал, что мог бы сделать что-то вроде этого:

if (url.indexOf("/navigation1/subnavigation1/") != -1) {
    if(jQuery('ul ul.menu li a').attr('title') == "subnavigation 1 title"){ 
     jQuery(this).slideDown('normal');
    }
   }

Как я могу установить активный цвет шрифта или скользить вниз по моей субнавиге 1, если естьнет способа присвоить ему уникальный идентификатор или класс ??

Заранее спасибо!

Answer 1

Не уверен, что я полностью понимаю проблему, но селекторы атрибутов, вероятно, являются хорошей отправной точкой:

a[title="foobar"] { ... }

Таким образом, вы могли бы сделать что-то подобное:

body#currently_active_section a[title="currently_active_section"] { 
    /* styling rules for active navigation element go here */
}

Вы также можете использовать селекторы атрибутов с jQuery:

$('a[title="foobar"]')

, поэтому он должен работать даже в IE6.Не говоря уже о том, что в jQuery имеется около миллиона других селекторов, которые могут пригодиться при решении таких проблем: http://api.jquery.com/category/selectors.

Надеюсь, это поможет,

Simon

Answer 2

Большое спасибо Саймону.Использование селекторов атрибутов решило мою проблему:

if (url.indexOf("/navigation1/subnavigation1/") != -1) {
jQuery('a[title="subnavigation1"]').parents().slideDown('normal');              
jQuery('a[title="subnavigation1"]').addClass('active');
}

}

Поэтому каждый раз, когда моя хеш-история в URL-адресе браузера (var url) содержит "subnavigation1" элемент с атрибутом заголовка "subnavigation1"окрашен в активный цвет.

В навигационном переключателе я добавил:

jQuery('ul.menu li').click(function(){    
        // remove active class
        jQuery('a').removeClass('active');
 });

... для удаления активного класса при каждом нажатии навигационного элемента.