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

I have a fully ajaxed wordpress page and i am adding my navigation in wordpress via wp_nav_menu()

我有一个完全ajaxed wordpress页面，我通过wp_nav_menu（）在wordpress中添加我的导航

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

Wordpress outputs the following html structure:

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 toggles its submenu with Jquery and the following bit of code.

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

So far so good. Everything works fine.

到现在为止还挺好。一切正常。

Now i want to add active color states and slidedown the correct subnavigation on a full page reload, and can´t really figure out how to grab specific selectors for all the elements. You can add the "title" attribute in the WP Backend, and i thought i could do something like this:

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

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

How can i set a active font color or slide down my subnavigation 1 if there´s no way to give it a unique ID or class??

如果没有办法给它一个唯一的ID或类，我如何设置一个活动的字体颜色或滑下我的subnavigation 1？

Thanks in advance!

提前致谢！

2 个解决方案

#1

Not sure if I completely understand the problem here, but Attribute Selectors are probably a good starting point:

不确定我是否完全理解这里的问题，但属性选择器可能是一个很好的起点：

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

That way you could do somethging like that:

这样你可以做那样的事情：

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

You can also use Attribute Selectors with jQuery:

您还可以将属性选择器与jQuery一起使用：

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

that way it should even work in IE6. Not to mention that jQuery has about a zillion other selectors that might come in handy when dealing with such problems: http://api.jquery.com/category/selectors.

这样它甚至可以在IE6中运行。更不用说jQuery有大量其他选择器可以在处理这些问题时派上用场：http：//api.jquery.com/category/selectors。

Hope it helps,

希望能帮助到你，

Simon

西蒙

2 个解决方案

#1

更多相关文章

随机推荐