将活动链接和jquery滑动切换添加到页面重新加载时的自定义ajax wordpress导航

Question

我有一个完全无用的wordpress页面，我正在通过wp_nav_menu()在wordpress中添加我的导航。

<?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>

我的导航用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');
        }   
    });

到目前一切尚好。一切都很好。

现在我想添加活动的颜色状态，并在整个页面重新加载时向下滑动正确的子导航，但无法真正弄清楚如何为所有元素抓取特定的选择器。你可以在WP后台添加"title“属性，我想我可以这样做：

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

如果无法为子导航1指定唯一的ID或类，如何设置活动字体颜色或向下滑动？？

提前感谢！

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。

希望能有所帮助，

西蒙

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');
 });

...to每次单击导航元素时都会移除活动类。