jQuery - 活动链接和父关系 [英] jQuery - Active Link and Parent Relationship

问题描述

我正在为网站进行导航，需要一些关于动态添加类到活动链接的指导。此外，一旦建立了这个链接，我需要引用回到父母并让它显示。

I am working on a navigation for a site and need some guidance on dynamically adding a class to the active link. In addition, once that link is established and I need to reference back to the parent and have it "show".

这就是我正在使用的。导航是手风琴风格，但不使用Accordion UI。

This is what I am working with. The navigation is accordion style but does not use the Accordion UI.

<ul id="menu3">
    <li><a href="{site_url}">Home</a></li>
    <li><a class="drop" href="#">Information</a>
        <ul>
            <li><a href="{site_url}information/audio">Audio</a></li>
            <li><a href="{site_url}information/video">Video</a></li>
            <li><a href="{site_url}information/presentations">Presentations</a></li>
        </ul>
    </li>
    <li><a class="drop" href="#">Clinics</a>
        <ul>
            <li><a href="{site_url}clinics/one">Office 1</a></li>
            <li><a href="{site_url}clinics/two">Office 2</a></li>
        </ul>
    </li>
    <li><a href="{site_url}forms/">Forms</a></li>
    <li><a href="{site_url}success_stories/index">Success Stories</a></li>

然后我有一点jQuery最初隐藏子菜单项：

Then I have a bit of jQuery to initially hide the submenu items:

$(function(){
$('ul#menu3 ul').hide();                
$('ul#menu3 > li > a.drop').click(function(){
$(this).parent().children('ul').toggle("slow");
   return false;
});

到目前为止一切顺利。一切正常。

So far so good. Everything works.

现在我想动态突出显示活动链接，我尝试使用：

Now I would like to dynamically highlight the active link and I tried using:

var path = location.pathname.substring(1);
if ( path )
$('ul#menu3 a[href$="' + path + '"]').attr('class', 'selected');

但是添加正确的类似乎不够。

but it doesn't seem to be enough to add the correct class.

我需要做的最后一件事是将导航打开到活动组。例如，音频是当前页面，naviga的信息部分手风琴将是开放的，以显示活跃的链接。

The last thing I need to do is to have the navigation open to the active group. For example if Audio is the current page, the Information section of the navigation accordion would be open to show the active link.

我真的很感激这方面的一些帮助。谢谢。

I would really appreciate some help on this. Thanks.

推荐答案

以下内容对我来说效果很好。您添加选定代码也可按预期工作。内联提供的评论。如果问题仍未解决......评论/询问。

The following just works fine for me. Also your add "selected" code works as expected. Comments provided inline. If question remain open... comment/ask.

$(function() {
    var pathname = location.pathname;
    var highlight;
    //highlight home
    if(pathname == "/")
        highlight = $('ul#menu3 > li:first > a:first');
    else {
        var path = pathname.substring(1);
        if (path)
            highlight = $('ul#menu3 a[href$="' + path + '"]');
    }
    highlight.attr('class', 'selected');

    // hide 2nd, 3rd, ... level menus
    $('ul#menu3 ul').hide();

    // show child menu on click
    $('ul#menu3 > li > a.drop').click(function() {
        //minor improvement
        $(this).siblings('ul').toggle("slow");
        return false;
    });

    //open to current group (highlighted link) by show all parent ul's
    $('a.selected').parents("ul").show();

    //if you only have a 2 level deep navigation you could
    //use this instead
    //$('a.selected').parents("ul").eq(0).show();
});

这篇关于jQuery - 活动链接和父关系的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！