submenu stay open on menu click

[UD2006]

Ok, first let me explain what I try to do.

I have a menu with some items containing a submenu. The submenu's should open when a parent is clicked and contains submenu's, and when traveling to another page (from the item clicked, for example a parent of submenu item), the submenu should remain active and visible.

When I click on a parent (at the moment the hrefs contain no links just #), the submenu opens. But when I click another main item, the submenu of the previous parent remain visible, and the submenu of the parent just clicked is also visible, while I only want the submenu of the parent clicked to be visible or when parent with no submenu the submenu should be invisible.

So, here is the code I have so far:

<div id="topnav">
        <ul>
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a href="#">Over Meves</a>
                <ul class="submenu">
                    <li><a href="#" class="suba">Historie</a></li>
                    <li><a href="#" class="suba">Onze mensen</a></li>
                    <li><a href="#" class="suba">Werkzijze</a></li>
                </ul>
            </li>
            <li>
                <a href="vervolg3.html">Disciplines</a>
                <ul class="submenu">
                    <li><a href="vervolg.html" class="suba">Klimaatbeheersing</a></li>
                    <li><a href="#" class="suba">Elektrotechniek</a></li>
                    <li><a href="#" class="suba">Sanitaire techniek</a></li>
                    <li><a href="#" class="suba">Energiebesparingstechniek</a></li>
                    <li><a href="#" class="suba">Bouwfysica en geluid</a></li>
                    <li><a href="#" class="suba">Diensten energiebesparing</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Expertise</a>
                <ul class="submenu">
                    <li><a href="#" class="suba">Woningbouw & Utiliteit</a></li> 
                    <li><a href="#" class="suba">Zorg & Welzijn</a></li> 
                    <li><a href="#" class="suba">Milieu & Energie</a></li> 
                    <li><a href="#" class="suba">Beheer & Onderhoud</a></li> 
                    <li><a href="#" class="suba">EPA & EPC</a></li> 
                    <li><a href="#" class="suba">Legionella beheersing</a></li>
                </ul>          	
            </li>
            <li>
                <a href="#">Contact</a>
                <ul class="submenu">
                    <li><a href="#" class="suba">Adres & route</a></li> 
                    <li><a href="#" class="suba">Werken bij</a></li>
                </ul>
            </li>
        </ul>
    </div>

The javascript:

<script type="text/javascript">
var ddmenuitem = 0;
function jsddm_open()
{  jsddm_close();
   ddmenuitem = $(this).find('ul.submenu').css('display', 'block');
}
function jsddm_close()
{  
	if(ddmenuitem) ddmenuitem.css('display', 'none');
}
$(document).ready(function()
{  
   $('#topnav > ul > li').bind('click', jsddm_open)
   $('#topnav ul li a.suba').click(function(e){
     if ($(this).attr('class') != 'active'){
       $('#topnav ul li a.suba').removeClass('active');
       $(this).addClass('active');
     }
   });
	   $("ul.submenu > li > a").each(function () {
         var currentURL = document.location.href;
         var thisURL = $(this).attr("href");
         if (currentURL.indexOf(thisURL) != -1) {
	         $(this).parents("ul.submenu").css('display', 'block');
         }
       });
	   $('a').each(function () {
		var currentURL = document.location.href;
		var thisURL = $(this).attr('href');
		if (currentURL = thisURL) {
			$(this).parents('ul.submenu').css('display', 'block');	
		}
	//	else {
		//	$(this).parents('ul.submenu').css('display', 'none');	
	//	}
	   }); 
});
</script>

And the css:

#topnav ul
{
	list-style: none;
	padding: 0;
	margin: 0;
}
#topnav ul li 
{
	float: left;
	margin: 0;
	padding: 0;
}
#topnav ul li a
{
	padding: 5px 15px;
	color: #00537F;
	text-decoration: none;
	display: block;
	font-weight: bold;
}
#topnav ul li a:link
{
	color: #FFF;
	text-decoration: none;
}
#topnav ul li a:visited
{
	color: #FFF;
	text-decoration: none;
}
#topnav ul li a:hover
{
	color: #FFF;
	text-decoration: underline;
}
#topnav ul li a.active
{
	text-decoration: underline;
	color: #FFF;
}
/*#topnav ul li:hover .submenu
{
	display:block;
}*/
#topnav ul li ul.submenu
{
	float: left;
	padding: 4px 0;
	position: absolute;
	left: 0;
	top: 24px;
	display: none;
	background: #e0e0e0;
	color: #00537F;
}
#topnav ul li ul.submenu a
{
	display: inline;
	color: #00537F;
	padding: 4px 8px;
}
#topnav ul li ul.submenu li
{
	border-right-width: 1px; 
	border-right-style: solid;
	border-right-color: #00537F;
}
#topnav ul li ul.submenu li:last-child
{
	border-right-style: none;
}
#topnav ul li ul.submenu a:link
{
	color: #00537F;
}
#topnav ul li ul.submenu a:visited
{
	color: #00537F;
}
#topnav ul li ul.submenu a:hover
{
	text-decoration: underline;
	color: #00537F;
}
#topnav ul li ul.submenu li.active
{
	text-decoration: underline;
	color: #00537F;
}
#topnav ul li ul.submenu a.active
{
	text-decoration: underline;
	color: #00537F;
}

Hope I explained it clear.

Thanks for any help.

[UD2006]

I've made some changes to the jquery code:

var ddmenuitem = 0;
function jsddm_open()
{  jsddm_close();
   ddmenuitem = $(this).find('ul.submenu').css('display', 'block');
}
function jsddm_close()
{  
	if(ddmenuitem) ddmenuitem.css('display', 'none');
}
$(document).ready(function()
{  
   $('#topnav > ul > li').bind('click', jsddm_open)
   $('#topnav ul li a.suba').click(function(e){
     if ($(this).attr('class') != 'active'){
       $('#topnav ul li a.suba').removeClass('active');
       $(this).addClass('active');
     }
   });
	   $('a').filter(function(){
			return this.href === document.location.href;
	   }).addClass('active')
	   $("ul.submenu > li > a").each(function () {
         var currentURL = document.location.href;
         var thisURL = $(this).attr("href");
         if (currentURL.indexOf(thisURL) != -1) {
	         $(this).parent("ul.submenu").css('display', 'block');
         }
       });
});

Now when I click on a parent item the submenu quickly blinks but is closed even as fast as it opens. I want the submenu to remain open when clicked on a parent that has a submenu, so users can easily navigate.

Please help.

[UD2006]

Is there no one who can help me with this problem?

The only thing that needs to be done is, when click on a parent menu item (going to the href), to script should check/compare the href and check if the parent menu item haschildren, if yes, show submenu.

I have tried a couple of things but couldn't find a way of doing this.

[UD2006]

The submenu isn't showing when I load a parent page.

I've been playing with a code, but this is still not working:

$('#topnav a').each(function(){
  var myHref= $(this).attr('href');
  if( url.match( myHref)) {
	$(this).addClass('active');
	$(this).closest('ul').css('display', 'block');
  }
});

Can anyone take a look at it?

[UD2006]

Ok, I solved it with the following jquery code:

$(document).ready(function()
{  
   $('#topnav ul li ul.submenu li a').click(function(e){
     if ($(this).attr('class') != 'active'){
       $('#topnav ul li a').removeClass('active');
       $(this).addClass('active');
     }
   });
	   $('a').filter(function(){
			return this.href === document.location.href;
	   }).addClass('active')
	   $("ul.submenu > li > a").each(function () {
         var currentURL = document.location.href;
         var thisURL = $(this).attr("href");
         if (currentURL.indexOf(thisURL) != -1) {
	         $(this).parents("ul.submenu").css('display', 'block');
         }
       });
       $('#topnav > ul > li > a').each(function(){
      var currURL = document.location.href;
	  var myHref= $(this).attr('href');
      if (currURL.match(myHref)) {
			$(this).addClass('active');
			$(this).parent().find("ul.submenu").css('display', 'block');
	  }
	});
});