Adding if/else to existing function for js menu [Archive]

pike800

09-18-2011, 04:32 PM

Hi there, 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>
</ul>

Thanks for any help or advice.

Raphael

09-23-2011, 06:18 PM

I just threw something together. Is this what you're looking for?

<html>
<head>

<style>
.topnav
{
color:green;

}

.selected
{
color:blue;
background-color:red;
}
</style>

<script language="javascript" type="text/javascript">
var cursel=undefined;

function cngclass(obj)
{
if(cursel)
{
//reset the previously selected item
cursel.className=''
}

obj.className='selected';
cursel=obj
}
</script>

</head>
<body>

<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>
</ul>
</body>