Question

我有一个完全ajaxed 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');
    }
   }

如果无法为其提供唯一ID或类，我如何设置活动字体颜色或滑下我的子导航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。

希望它有所帮助，

西蒙

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

...每次点击导航元素时删除活动类。

在页面重新加载时添加活动链接和jquery幻灯片切换到自定义ajax wordpress导航

2 个答案: