使用jQuery将类添加到嵌套ul li中的top li元素

Question

I have following nested ul li tree structure

<ul id='main-menu'>
    <li>
        <a href=""><div>About Us</div></a>
        <ul>
            <li>
                <a href=""><div>Know Us</div></a>
            </li>
            <li>
                <a href=""><div>History</div></a>
                <ul>
                    <li>
                        <a href=""><div>Mission</div></a>
                    </li>
                    <li>
                        <a href=""><div>Vision</div></a>
                    </li>
                    <li>
                        <a href=""><div>Milestones</div></a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

So here top most li element is "About Us", what i want to do is when any child link of About US is opened i want to add class to About US li to show it is active, i have tried number different ways but not succeeded, can any one help me with this ? i am knew to jquery

Answer 1

You can add an id (for a simpler identification of the menu element) to your 'About us' link and on document.ready for each page that can be accessed from 'About us' menu, you will add a class to the 'About us' menu

$( document ).ready(function() {
   $('#aboutUsLink').addClass('active-menu');
});

Answer 2

First of all you have to remember that each time you click on a particular link, your browser will load completely new page. So the best joice would be to add this "active" class on server side (php, ASP etc.)

But if you really have to add it on the browser side you could simply add to each of those web site a javascript with code:

$(function(){
  var pageName = (window.location.href || '').trim().toLowerCase().match(/[^\/]+$/gm);
  var linkToThePage = $('a[href="'+pageName+'"]:first-of-type', $('#main-menu'));
  var allParentLi = linkToThePage.parents('li');
  allParentLi.addClass('selected');
});

I've implemented this here: https://plnkr.co/edit/Lwy8TQ8IFyadERkMzo71

You can run it and click on "Vision" or "Milestones" links.