0

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('<span class="holder"></span>');
 });
1
  • I think it could be solved from the javascript only. May 3, 2015 at 9:19

2 Answers 2

1
    **EWD**

     <td>
<div id="boxContent">
<div class="txtHeading"><b>Practice Management Software</b></div>
 <div style="width:948px; height:100%;">
 <div style="height:100%; width:680px;"></div>
    <table width="100%" cellpadding="0" cellspacing="0" class="padding2">
     <tr>
     <td>
<div id='cssmenu'>
<ul>

   <li class='active'><a href=#><span>MCTVistA</span></a></li>
   <li class='has-sub'><a href='#'><span>OPD PIMS</span></a>
      <ul>
           <ewd:if firstvalue="#ROLE" operation="=" secondvalue="1" >
             <li><a href="registration.ewd"><span>Registration</span></a></li>
             <li><a href="registrationemg.ewd" class="dislink" ><span>Emergency Registration</span></a></li>
             <li><a href="registrationold.ewd" class="dislink" ><span>Old Registration</span></a></li>
             <li><a href="search.ewd"><span>Patient Search</span></a></li>
             <li><a href="advancesearch.ewd"><span>Advance Search</span></a></li>
             <li><a href="opdSearch.ewd"><span>OPD List</span></a></li>
             <li><a href="opdReport.ewd"><span>OPD Reports</span></a></li>
             <li><a href="opdcensus.ewd"><span>OPD Census</span></a></li>
             <li><a href="billRpt.ewd"><span>Billing Report</span></a></li>
             <li><a href="opdRptVisit.ewd"><span>Visit Report</span></a></li>
          <ewd:elseif firstvalue="#ROLE" operation="=" secondvalue="5" >
             <li><a href="registration.ewd"><span>Registration</span></a></li>
             <li><a href="registrationemg.ewd" class="dislink"><span>Emergency Registration</span></a></li>
             <li><a href="search.ewd"><span>Patient Search</span></a></li>
             <li><a href="advancesearch.ewd"><span>Advance Search</span></a></li>
             <li><a href="opdSearch.ewd"><span>OPD List</span></a></li>
             <li><a href="billRpt.ewd"><span>Billing Report</span></a></li>
          <ewd:elseif firstvalue="#ROLE" operation="=" secondvalue="6" >
             <li><a href="registration.ewd"><span>Registration</span></a></li>
             <li><a href="search.ewd"><span>Patient Search</span></a></li>
             <li><a href="advancesearch.ewd"><span>Advance Search</span></a></li>
             <li><a href="opdSearch.ewd"><span>OPD List</span></a></li>
             <li><a href="billRpt.ewd"><span>Billing Report</span></a></li>
          <ewd:else>
             <li><a href="ewdLogout.ewd"><span>User Role Undefined</span></a></li>
          </ewd:if>




      </ul>
   </li>


  <li class='has-sub'><a href='#'><span>Services Billing</span></a>
          <ul>
          <ewd:if firstvalue="#ROLE" operation="=" secondvalue="1" >
            <li><a href="billTc.ewd"><span>Make Billing</span></a></li>
            <li><a href="billSearch.ewd"><span>Search Billing</span></a></li>
            <li><a href="billReport.ewd"><span>Billing Report</span></a></li>
            <li><a href="search2.ewd"><span>Search Patient</span></a></li>
            <li><a href="billCatAdd.ewd"><span>Add Category</span></a></li>
            <li><a href="billCatSea.ewd"><span>Search Category</span></a></li>
            <li><a href="billSCatAdd.ewd"><span>Add Sub Category</span></a></li>
            <li><a href="billSCatSea.ewd"><span>Search Sub Category</span></a></li>
            <li><a href="billSerAdd.ewd"><span>Add Service</span></a></li>
            <li><a href="billSerSea.ewd"><span>Search Service</span></a></li>
         <ewd:elseif firstvalue="#ROLE" operation="=" secondvalue="6" >
            <li><a href="billTc.ewd"><span>Make Billing</span></a></li>
            <li><a href="billSearch.ewd"><span>Search Billing</span></a></li>
            <li><a href="billReport.ewd"><span>Billing Report</span></a></li>
         <ewd:elseif firstvalue="#ROLESBILL" operation="=" secondvalue="1" > 
            <li><a href="billTc.ewd"><span>Make Billing</span></a></li>
            <li><a href="billSearch.ewd"><span>Search Billing</span></a></li>
            <li><a href="billReport.ewd"><span>Billing Report</span></a></li>
            <li><a href="search2.ewd"><span>Search Patient</span></a></li>
          <ewd:else>
             <li><a href="ewdLogout.ewd"><span>User Role Undefined</span></a></li>
            </ewd:if>
          </ul>
        </li>

    <li class='has-sub'><a href='#'><span>IPD PIMS</span></a>
            <ul>

          <ewd:if firstvalue="#ROLE" operation="=" secondvalue="1" >
            <li><a href="tca.ewd"><span>Admission</span></a></li>
            <li><a href="tct.ewd"><span>Ward Transfer</span></a></li>
            <li><a href="tcb.ewd"><span>Bed Switch</span></a></li>
            <li><a href="tcd.ewd"><span>Discharge</span></a></li>
            <li><a href="tcadt.ewd"><span>IPD View/Edit/Report</span></a></li>
            <li><a href="tcds.ewd"><span>Discharge Summary</span></a></li>
            <li><a href="admsearch.ewd"><span>Admission Report</span></a></li>
            <li><a href="dissearch.ewd"><span>Discharge Report</span></a></li>
                        <li><a href="ipdBmWard.ewd"><span>Bed Management</span></a></li>
        <ewd:elseif firstvalue="#ROLE" operation="=" secondvalue="6" >
            <li><a href="tca.ewd"><span>Admission</span></a></li>
            <li><a href="tct.ewd"><span>Ward Transfer</span></a></li>
            <li><a href="tcb.ewd"><span>Bed Switch</span></a></li>
            <li><a href="tcd.ewd"><span>Discharge</span></a></li>
            <li><a href="tcadt.ewd"><span>IPD View/Edit/Report</span></a></li>
            <li><a href="tcds.ewd"><span>Discharge Summary</span></a></li>
            <li><a href="admsearch.ewd"><span>Admission Report</span></a></li>
            <li><a href="dissearch.ewd"><span>Discharge Report</span></a></li>
            <li><a href="ipdBmWard.ewd"><span>Bed Management</span></a></li>
        <ewd:elseif firstvalue="#ROLE" operation="=" secondvalue="3" >  
            <li><a href="tct.ewd"><span>Ward Transfer</span></a></li>
            <li><a href="tcb.ewd"><span>Bed Switch</span></a></li>
            <li><a href="tcd.ewd"><span>Discharge</span></a></li>
            <li><a href="tcadt.ewd"><span>IPD View/Edit/Report</span></a></li>
            <li><a href="tcds.ewd"><span>Discharge Summary</span></a></li>
            <li><a href="admsearch.ewd"><span>Admission Report</span></a></li>
            <li><a href="dissearch.ewd"><span>Discharge Report</span></a></li>
            <li><a href="ipdBmWard.ewd"><span>Bed Management</span></a></li>
        <ewd:elseif firstvalue="#ROLE" operation="=" secondvalue="10" > 
            <li><a href="tcadt.ewd"><span>IPD View/Edit/Report</span></a></li>
            <li><a href="tcds.ewd"><span>Discharge Summary</span></a></li>
            <li><a href="admsearch.ewd"><span>Admission Report</span></a></li>
            <li><a href="dissearch.ewd"><span>Discharge Report</span></a></li>
            <li><a href="ipdBmWard.ewd"><span>Bed Management</span></a></li>
        <ewd:elseif firstvalue="#ROLEIPD" operation="=" secondvalue="1" >
            <li><a href="tca.ewd"><span>Admission</span></a></li>
            <li><a href="tcadt.ewd"><span>IPD View/Edit/Report</span></a></li>
            <li><a href="admsearch.ewd"><span>Admission Report</span></a></li>
            <li><a href="ipdBmWard.ewd"><span>Bed Management</span></a></li>
         <ewd:else>
             <li><a href="ewdLogout.ewd"><span>User Role Undefined</a></li>
          </ewd:if>   
            </ul>
      </li>  
<li class='has-sub'><a href='#'><span>Reports</span></a>
            <ul>

          <ewd:if firstvalue="#ROLE" operation="=" secondvalue="1" >
            <li><a href="rptOpdCensus.ewd"><span>OPD Census Report</span></a></li>
            <li><a href="rptIpdCensus.ewd"><span>IPD Census Report</span></a></li>
            <li><a href="rptSBillCensus.ewd"><span>Services Bill Census Report</span></a></li>
            <li><a href="rptDcr.ewd"><span>Daily Collection Report</span></a></li>
            <li><a href="rptOpdOperator.ewd"><span>OPD Operator Report</span></a></li>
         <ewd:else>
             <li><a href="ewdLogout.ewd"><span>User Role Undefined</a></li>
          </ewd:if>   
            </ul>
      </li>  


</ul>
</td>
2
  • looks like html to me May 3, 2015 at 13:01
  • or you suggest what to do May 3, 2015 at 20:47
0

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...
});
4
  • I am using ewd code and dont want to do the changes there.because there are many pages then which i would have to change.Pls suggest something in javascript only. May 3, 2015 at 12:45
  • how to create session in javascript for this.I am not knowing much about java. May 3, 2015 at 12:47
  • $('#cssmenu>ul>li').tigger('click'); May 3, 2015 at 12:48
  • Do this .trigger could help in any manner. when I am using this .trigger the last submenu remains open after coming back from the next page. May 3, 2015 at 12:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.