issue with javascript onclick event

[shuka79]

Hi guys,

I have developed a menu structure that has several sub-menus which are hidden until you click on the menu item. Once this happens I have got a onclick event which will display the sub menu below, changes the font colour of the menu item you have just click on and changes the background image of the click menu item. This all works fine in all browsers, however the problem I am having is that when you click on the menu item again I want it to go back to the orignal state. This is working in IE7 and IE8 not tested in IE9 yet, but it is not working in Firefox, chrome, safari, opera and flock. In all the browser it re-hides the sub-menu but does't change the font colour or background image back. I have included the code below

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

    function toggle_background(id) {
       var e = document.getElementById(id);
       if(e.style.background == 'url(img/sb-menu-select-bg.jpg)')
          e.style.background = 'url(img/sb-menu-bg.jpg)';
       else
          e.style.background = 'url(img/sb-menu-select-bg.jpg)';
    }

	function toggle_linkcolour(id) {
       var e = document.getElementById(id);
       if(e.style.color == '#bd222f')
          e.style.color = '#000000';
       else
          e.style.color = '#bd222f';
    }

//-->
</script>

<div class="menu-layout">
	<ul>
    	<li><a href="">item 1</a></li>
    	<li id="item2" style="background-image:url(img/sb-menu-bg.jpg);"><a id="item2-link" href="#" style="color:#000000;" onclick="toggle_visibility('sub-item2'); toggle_background('item2'); toggle_linkcolour('item2-link');">item 2</a>
        	<ul style="display:none;" id="sub-item2">
              <li><a href="">sub item 1</a></li>
              <li><a href="">sub item 2</a></li>
              <li><a href="">sub item 3</a></li>
              <li><a href="">sub item 4</a></li>
		    </ul>
        </li>
    	<li><a href="">item 3</a></li>
    	<li><a href="">item 4</a></li>
	</ul>
</div>

if anyone can see what is causing this it be very much appreciated
thanks in advance
shuka

[maba001]

My initial try would be to use

e.style.backgroundImage

as the style element. However this is not tested. Its just based on the DOM analysis in FireBug.

[shuka79]

thanks maba001 for your reply, I have tried using backgroundImage and background-image but still doesn't work.

[maba001]

thanks maba001 for your reply, I have tried using backgroundImage and background-image but still doesn't work.

Hello,

did you install FireBug (the Firefox plugin)? This will highlight Javascript errors and it comes with a Javascript command line, a DOM browser and all kinds of useful tools to debug such situations.

[AleMonteiro]

I would try something like this, tested on IE 8 and FF 3

<script type="text/javascript">

window.onload = function ()
{
	var menu = document.getElementById("menu"); // Get menu object
	for (var i=0; i < menu.children.length; i++)
	{
		menu.children[i].children[0].onclick = menuItemClick; // Add click events for each menu item
	}
}

function menuItemClick(event)
{
	
	var target = window.event ? window.event.srcElement : event.target; // Get the menu item being clicked
	var parent = target.parentNode; // Get current LI
	
	if ( parent.children.length > 1 ) // If has submenu
	{
		var submenu = parent.children[1]; // Get the submenu object
		
		if ( submenu.style.display == "block" )
		{
			submenu.style.display = "none";
			target.style.color = "#FFFFFF";
			parent.style.background = "#FF0000";
		}
		else
		{
			submenu.style.display = "block";
			target.style.color = "#000000";
			parent.style.background = "#00FF00";
		}
	}
}

</script>

<style type="text/css">

	.menu li
	{
		background: #FF0000;
	}

	.menu li a
	{
		color: #FFFFFF;
	}

	.menu li ul
	{
		display: none;
	}

</style>

<div class="menu-layout">
	<ul id="menu" class="menu">
		<li><a href="#">item 1</a></li>
		<li>
			<a href="#" >item 2</a>
			<ul  class="submenu">
				<li><a href="#">sub item 1</a></li>
				<li><a href="">sub item 2</a></li>
				<li><a href="">sub item 3</a></li>
				<li><a href="">sub item 4</a></li>
			</ul>
		</li>
		<li><a href="#">item 3</a></li>
		<li><a href="#">item 4</a></li>
	</ul>
</div>

[shuka79]

Thanks AleMonteiro, that has worked great on all browsers except Flock but sure that will be fine. Thanks again

Maba001 thanks for your reply yes I have installed firebug after your first reply thanks for the tip!!

[AleMonteiro]

You're welcome Shuka79.

I've nerver used this Flock browser, i'm from Brazil and it's not a popular browser down here, but you should debug the script to see what part is going wrong.

Have a good day.