javascript - 突出显示父导航项

Question

我认为我已经接近这一点，但主要导航项仅在该实际页面上突出显示，而不是在其下面的任何页面上突出显示。

理想的效果是，如果您位于 Sub A、Sub B、Sub C 的页面上，则 Main Item 1 将应用 .primary-link-active 类，表明您位于网站的该部分。

这是一个 jsfiddle，不过因为代码是基于 URL 的，所以我认为这不能在 fiddle 中工作。

http://jsfiddle.net/richcoy/knjteaoj/1/

我从 Stackoverflow 上的另一个问题中获取了大部分 Javascript 脚本。感谢您提供的任何帮助。

HTML

 <ul class="nav  site-nav">
    <li class="nav__item has-dropdown">
        <a href="#" class="nav__link  primary-link">Main Item 1<i class="icon-down-arrow small-text float--right mr-"></i></a>
        <div class="dropdown">
            <ul class="grid">
                <li class="grid__item  desk--one-third  dropdown--column">

                    <div class="mb- ms- p- color-darker-gray">
                        <a href="#">Sub A</a>
                    </div>
                    <div class="mb- ms- p- color-darker-gray">
                        <a href="#">Sub B</a>
                    </div>
                    <div class="mb- ms- p- color-darker-gray">
                        <a href="#">Sub C</a>
                    </div>

                </li>

            </ul>
        </div>

    </li>

    <li class="nav__item has-dropdown">
        <a href="#" class="nav__link  primary-link">Main Item 2<i class="icon-down-arrow small-text float--right mr-"></i></a>


        <div class="dropdown">
            <ul class="grid">
                <li class="grid__item  desk--one-third  dropdown--column">

                    <div class="mb- ms- p- color-darker-gray">
                        <a href="#">Sub D</a>
                    </div>
                    <div class="mb- ms- p- color-darker-gray">
                        <a href="#">Sub E</a>
                    </div>
                    <div class="mb- ms- p- color-darker-gray">
                        <a href="#">Sub F</a>
                    </div>

                </li>

            </ul>
        </div>

    </li>
</ul>

Javascript

$(function() {
 var url = location.pathname; // get current URL
 $('nav a.primary-link[href^="' + url + '"]').addClass('primary-link-active');
});

var $activeUL = $('.primary-link-active').closest('.primary-link');
/*
Revise below condition that tests if .primary-link-active is a submenu
*/
if($activeUL.attr('class') != 'primary-link') { //check if it is submenu
    $activeUL
        .parent() //This should return the li
        .children('a') //The childrens are <a> and <ul>
        .addClass('primary-link-active'); //add class active to the a    
}

Answer 1

我认为你并不真正需要 div.dropdown，你可以使用下面的结构来处理它:

<ul>
    <li><a></a></li>
    <li><a></a>
      <ul>
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
      </ul>
     </li>
</ul>

无论如何，试试这个:

html:

<ul class="nav  site-nav">
<li class="nav__item has-dropdown"> <a href="#" class="nav__link  primary-link">Main Item 1<i class="icon-down-arrow small-text float--right mr-"></i></a>

    <ul class="grid">
        <li class="grid__item  desk--one-third  dropdown--column"> <a href="">Sub A</a>
            <ul>
                <li><a href="">link 1</a>
                    <ul>
                        <li><a href="tempfornow">link 3</a></li>
                        <li><a href="">link 4</a></li>
                        <li><a href="">link 5</a></li>
                        <li><a href="">link 6</a></li>
                    </ul>
                </li>
                <li><a href="">link 2</a></li>
            </ul>
        </li>
        <li class="grid__item  desk--one-third  dropdown--column"> <a href="#">Sub B</a>

        </li>
        <li class="grid__item  desk--one-third  dropdown--column"> <a href="#">Sub C</a>

        </li>
    </ul>
</li>
<li class="nav__item has-dropdown"> <a href="#" class="nav__link  primary-link">Main Item 2<i class="icon-down-arrow small-text float--right mr-"></i></a>

    <ul class="grid">
        <li class="grid__item  desk--one-third  dropdown--column"> <a href="#">Sub D</a>
        </li>
        <li class="grid__item  desk--one-third  dropdown--column"> <a href="#">Sub E</a>
        </li>
        <li class="grid__item  desk--one-third  dropdown--column"> <a href="#">Sub F</a>

        </li>
    </ul>
</li>

脚本:

$(function () {
    var url = 'tempfornow'; //location.pathname; // get current URL
    $('.nav a[href*="' + url + '"]').addClass('primary-link-active'); /*(1)*/
    $('>a',$('.primary-link-active').parents('li.nav__item')).addClass('primary-link-active'); /*(2)*/
});

我们做了什么:

1. 我们选择包含“url”的 anchor ，
2. 我们选择第一个选定 anchor 的父 anchor 。

注意:您使用了 $('nav .blabla')，nav 是一个标签，但是您有带有 class nav 的 div，您可以与这样的类选择器一起使用 $('.nav .blabla')

希望对您有所帮助。

JsFiddle Demo
JsFiddle Demo-2