вертикальное выпадающее меню свернуть

Question

Я сделал вертикальное меню с 4 подменю. Изображение находится в приложении с именем image1.

Эти подменю выпадающего списка, когда подменю нажимается, оно расширяется и отображает элементы подменю. Изображение 2.

При щелчке по элементу подменю открывается новая страница, как если бы 1 элемент был взломан, откроется новая страница. На этой вновь открывшейся странице есть кнопка «Назад», и когда я нажимаю на нее, она возвращается на главную страницу.

Но проблема в том, что подменю, которое было нажато, будет свернуто. Я хочу, чтобы он оставался расширенным. Я думаю, что проблема может быть решена с javascript, но я не могу этого сделать. Пожалуйста, помогите мне.

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>'); 
}); 

Answer 1

Поскольку вы покидаете страницу, которую вы теряете состояние. Вам нужно реализовать некоторую государственную настойчивость. Поскольку вы настаиваете на ТОЛЬКО с помощью Javascript, то я бы сказал, попробуйте использовать локальное хранилище ....

Window.localstorage

Если вы готовы использовать что-то другое, чем JavaScript, вы можете просто создать сеанс и сохранить состояние меню, поэтому, когда пользователь вернется, вы можете установить меню в предыдущее состояние.

UPDATE

Вы, вероятно, придется изменить этот код немного. Возможно, вам нужно убедиться, что thisval содержит значение, прежде чем пытаться вызвать событие click на нем. Вам также может потребоваться вызвать щелчок элемента перед a, потому что щелчок на a просто вернет вас на страницу, на которой вы были только что. Хорошо, посмотрите, что работает для вас ...

//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... 
}); 

Answer 2

**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>