通过Javascript功能设置多级菜单项的活动状态

Question

I'm looking for some help with modifying an existing function which controls the highlighted states of a multi level js accordion menu. I have had to use javascript due to certain css elements not working in safari browsers.

My problem is due to the multi level aspect as when a sub link is clicked, the parent link above it then deselects. I need the parent link to stay active when its sub links are clicked and only deselects when a link outside of that list is clicked upon.

I understand the theory of adding a conditional statement but simply don't know how to apply it correctly within the function...any help would be very much appreciated.

Here is the existing function which tells a link to be active or selected:

var Lst;

function CngClass(obj){
if (Lst) Lst.className='.topnav';
obj.className='selected';
Lst=obj;
}

and here is the menu code:

<ul class="topnav">
<li><a href="#">Home</a></li>

<li><a onclick="CngClass(this);" href="#">Top Link 2</a>
    <ul>
         <li><a onclick="CngClass(this);" href="#">Cookies</a></li>
         <li><a onclick="CngClass(this);" href="#">Events</a></li>
         <li><a onclick="CngClass(this);" href="#">Forms</a></li>
         <li><a onclick="CngClass(this);" href="#">Games</a></li>
         <li><a onclick="CngClass(this);" href="#">Images</a></li>
         <li><a onclick="CngClass(this);" href="#">Navigations</a>
            <ul>
                <li><a onclick="CngClass(this);" href="#">CSS</a></li>
                <li><a onclick="CngClass(this);" href="#">JavaScript</a></li>
                <li><a onclick="CngClass(this);" href="#">JQuery</a></li>
            </ul>
        </li>
         <li><a onclick="CngClass(this);" href="#">Tabs</a></li>
    </ul>
</li>
<li><a onclick="CngClass(this);" href="#">Tutorials</a>
    <ul>
         <li><a onclick="CngClass(this);" href="#">HTML</a></li>
         <li><a onclick="CngClass(this);" href="#">CSS</a></li>
         <li><a onclick="CngClass(this);" href="#">JavaScript</a></li>
         <li><a onclick="CngClass(this);" href="#">Java</a>
            <ul>
                <li><a onclick="CngClass(this);" href="#">JSP</a></li>
                <li><a onclick="CngClass(this);" href="#">JSF</a></li>
                <li><a onclick="CngClass(this);" href="#">JPA</a></li>
                <li><a onclick="CngClass(this);" href="#">Contact</a></li>
            </ul>
        </li>
         <li><a onclick="CngClass(this);" href="#">Tabs</a></li>
    </ul>
</li>
<li><a onclick="CngClass(this);" href="#">Contact</a></li>
<li><a onclick="CngClass(this);" href="#">Upload script</a></li>

Many thanks for any help or ideas...

Answer 1

Oh dear, may I ask why you're not simply using JQuery? It simplifies your task so much more. I've got a live example with JQuery (took me about 3 mins) you can try. I assume this is what you're trying to accomplish?

You can use the same method in normal javascript as well, except it's more work and probably less efficient. The general idea is:

1. remove active class from the current li
2. find the 3rd parent from the clicked link (li, ul, li) and then apply the active class to that one instead.

Here's the JQuery

$(document).ready(function(){
    $(".topnav li a").click(function(){

        //get the ul element
        var checkElement = $(this).next();
        if(checkElement.is('ul')) {
            //check if it's visible
            if(!checkElement.is(':visible')) {
                $(this).parent().addClass('opened');
                checkElement.slideDown();
            }else{
                $(this).parent().removeClass('opened');
                checkElement.slideUp();
            }
        }       

        //get the tree node
        var parentElement = $(this).parent().parent().parent();
        if(parentElement.is('li')){
            $(".topnav li.active").removeClass('active');
            parentElement.addClass('active');
        }
    });
});

Here's an example where it highlights the li element you clicked.