Question

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

这就是我正在使用的。导航是手风琴风格，但不使用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来初始隐藏子菜单项：

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

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

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

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

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

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

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

Answer 1

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

$(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 - 活动链接和父关系

1 个答案: