垂直下拉菜单崩溃

我已经用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>');
 });

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

由于您要离开页面，因此您正在失去状态。您需要实施某种状态的持久性。由于您只坚持使用JavaScript，因此我想尝试使用本地存储。

窗口。

如果您愿意使用JavaScript以外的其他内容，则可以创建一个会话并将菜单状态存储在此处，因此当用户回来时，您可以将菜单设置为以前的状态。

update

您可能必须对此代码进行一些调整。在尝试触发单击事件之前，您可能需要确保此Val包含一个值。您可能还需要在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...
});

相关内容

最新更新

热门标签：