vertical dropdown menu collapse

Question

I have made a vertical menu with 4 submenu. The image is in attachment named image1.

Those submenu are dropdown when a submenu is clicked it expands and shows the submenu items. Image 2.

When the submenu item is clicked a new page opens as if 1 item is cicked a new page will open. There is a back button on that newly opened page and when I click on it it comes back to the main page.

But the problem is that the submenu which was clicked get collapsed.I want that it should remain expanded. I think the problem could be solved from javascript side but I am not able to do that. Please help me.

javascript

$( document ).ready(function() {

    $('#cssmenu > ul > li > a').click(function() {

        $('#cssmenu li').removeClass('active'); 
        $(this).closest('li').addClass('active'); 
        var checkElement = $(this).next();

        if((checkElement.is('ul')) && (checkElement.is(':visible'))) { 
            $(this).closest('li').removeClass('active');    
            checkElement.slideUp('normal'); 
        } 

        if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { 
            $('#cssmenu ul ul:visible').slideUp('normal');                 
            checkElement.slideDown('normal'); 
        } 

        if($(this).closest('li').find('ul').children().length == 0) { 
            return true; 
        } else { 
            return false; 
        }

        if((checkElement.is('ul')) && (checkElement.is(':visible'))) {           
            checkElement.slideDown('normal'); 
        } 
    });

    $('#cssmenu>ul>li').append('');
 });

Tech Savant · Accepted Answer

Since you are leaving the page you are losing state. You need to implement some kind of state persistence. Since you insist on ONLY using Javascript, then I would say try using local storage....

Window.localstorage

If you are willing to use something other than javascript, you could just create a session and store the state of the menu there so when the user comes back, you can set the menu to the previous state.

UPDATE

You will probably have to tweak this code a bit. You may need to make sure that thisval contains a value before trying to trigger the click event on it. You may also need to trigger the click on the element before the a because the click on the a will just take you back to the page you were just at. OK, see if that works for you...

//this will fire on page load...
var thisval = localstorage.getItem('menu-pos');
if (thisval) {
    $("span:contains('"+thisval+"')").closest('ul').closest('a').trigger('click');
}
//this will fire on click
$('#cssmenu > ul > li > a').click(function() {

    var thisval = $(this).find('span').html();
    localstorage.setItem("menu-pos", thisval);

    //rest of the code...
});

vertical dropdown menu collapse

Answers (2)

Related Questions