submenu div issue - php

Question

I am having a menu with sub menu.. this menu is coming from Data Base. on clink one of main menu a sub menu opens.. I want that when I click on any link of sub menu.. the sub menu remains open and the selected sub menu should remain selected. but problem is that when I click on any sub menu link.. I reached it's relevant link.. but sub menu get hide . I tried to using J-query to do so.. but failed due to loading new page... please tell me any way to do so.. now i want to use jquery or ajax solution of this

Answer 1

After reading your problem i think this may help you.
Use jQuery(include jQuery Library).
On page you want to keep selected Main menu and submenu, Do the follwoing:
Get Main menu and sub-menu ID and toggle it with jQuery.
$("#mainmenuid").toggle('fast');
$("#submenu").toggle('fast');
OR you can apply any jQuery events.
Note: Add jQuery in the header area of that particular page page.

Answer 2

You can try this :
$('#menu > li > a').click(function(){
if($(this).siblings('ul').length > 0){
$(this).siblings('ul').show();
return false; // This will do what you want.
}
});
This will not allow links if has any sibling "ul" elements. Otherwise, it will be go to it's href.
Test here :
http://jsfiddle.net/SXKG4/2/

Answer 3

You can try load if you want an ajax solution:
suppose this is the html:
<ul id='main-menu'>
<li><a href='pages/home.html'>Home</a></li>
<li><a href='pages/about.html'>About us</a>
<ul class='sub-menu'> /*initially hide it display:none;*/
<li><a href='pages/subpage1.html'>sub link 1</a></li>
<li><a href='pages/subpage2.html'>sub link 2</a></li>
</ul>
</li>
</ul>
<div id='content'></div> <!--here you have to put page contents-->
Then you can use this jQuery:
$(function(){
$('#main-menu li').click(function(){
var page = $(this).find('a').attr('href');
$('#content').load(page);
$('.submenu',this).toggle();
});
$('#main-menu a').click(function(e){
e.preventDefault(); // <-----this stops page to navigate to link href
});
$('.submenu li').click(function(ev){
ev.stopPropagation(); //<----stops the event bubbling to the parent
});
});