My website has a dropdown menu, but whenever I click on a submenu link, the new page opens and the menu closes. However, I want the active menu to remain open on the new page of the website!
To demonstrate what I have tried in a simple way, I created an example on JSFiddle: Example
HTML:
<ul id="menu">
<li> <a href="javascript:void(0);" class="clickme">Click me 1</a>
<ul style="display:none">
<li><a href="#">Dropdown link</a>
</li>
<li><a href="#">Dropdown link</a>
</li>
</ul>
<li> <a href="javascript:void(0);" class="clickme">Click me 2</a>
<ul style="display:none">
<li><a href="#">Dropdown link</a>
</li>
<li><a href="#">Dropdown link</a>
</li>
</ul>
</li>
</ul>
AJAX:
$(document).ready(function () {
$('#menu li > a').click(function (e) {
if ($(this).next('ul').length > 0) {
e.preventDefault();
var subNav = $(this).next('ul');
if (subNav.is(':visible')) {
subNav.slideUp('normal')
$(this).removeClass("selected");
} else {
$('#menu ul:visible').slideUp('normal');
subNav.slideDown('normal');
$("a.selected").removeClass("selected");
$(this).addClass("selected");
}
}
});
});
Any assistance with this issue would be greatly appreciated!