突出显示父导航项

Question

我想我已经接近了这一点，但主导航项仅在该实际页面上时才会突出显示，而不是在其下方的任何页面上。

想要的效果是，如果您位于 Sub A、Sub B、Sub C 的页面上，那么 Main Item 1 将获得应用到它的 .primary-link-active 类，表明您在站点的该部分。

这是一个 jsfiddle，但因为代码是基于 URL 的，我不认为这可以在小提琴中工作。

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'的锚，
2. 我们选择其中第一个选择的锚的父母的锚。

注意：你使用了 $('nav .blabla')，nav 是一个标签，但是你有带有类 nav 的 div，你可以像这样使用类选择器 $('.nav .blabla')

希望对你有帮助。

JsFiddle Demo
JsFiddle Demo-2