Question

我想我已经接近了，但主导航项目只在该实际页面上突出显示，而不是在它下面的任何页面上突出显示。

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

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

我从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)*/
});

我们做了什么：

我们选择包含'url'的锚，
我们选择其中第一个选定锚的父母的锚。

注意：你使用了$（'nav .blabla'），nav是一个标签，但你有div类和导航，你可以使用像这样的类选择器$（'。nav .blabla'）

我希望它有所帮助。

JsFiddle Demo
JsFiddle Demo-2

突出显示父导航项

1 个答案: