CSS - 在子菜单上单击时，保持父展开和子菜单高亮显示。

Question

我有一个CSS垂直菜单子菜单。我在主页面的ASP.Net应用程序中添加了这个。每个菜单点击导航到不同的aspx页面。当展开的父菜单中的任何子菜单被点击时，该页面将被重定向到相应的aspx页面，但是父页面会再次折叠并且不保留子菜单。我想要扩展父菜单，并点击子菜单高度。

(function($) { 
$(document).ready(function() { 
    $('#cssmenu li.has-sub>a').on('click', function() { 

     $(this).removeAttr('href'); 
     var element = $(this).parent('li'); 
     if (element.hasClass('open')) { 

      element.removeClass('open'); 
      element.find('li').removeClass('open'); 
      element.find('ul').slideUp(); 
     } 
     else { 

      element.addClass('open'); 
      element.children('ul').slideDown(); 
      element.siblings('li').children('ul').slideUp(); 
      element.siblings('li').removeClass('open'); 
      element.siblings('li').find('li').removeClass('open'); 
      element.siblings('li').find('ul').slideUp(); 
     } 
    }); 
}); 
})(jQuery); 

HTML

<div id="cssmenu" > 
        <ul > 
         <li class="highlight"> 
          <a id="upload" href="Upload.aspx" ><span>Upload</span></a> 
         </li> 

         <li > 
          <a id="home" href="Home.aspx" ><span>Home</span></a> 
         </li> 
         <li> 
          <a href='Configurable Parameters.aspx'><span>configurable Parameters</span></a> 
         </li> 
        <li class='active has-sub'> 
         <a href='#'><span>Input</span></a> 
          <ul> 
           <li class='last'> 
            <a href="#"><span>Data - QRM</span></a> 
           </li> 

           <li class='last'> 
            <a href="DMSwaps.aspx"><span>Data Murex - Swaps</span></a> 
           </li> 
           <li class='last'> 
            <a href="DMMRates.aspx"><span>Data Murex - Market rates</span></a> 
           </li> 
           <li class='last'> 
            <a href="#"><span>Data - Previous Months</span></a> 
           </li> 
          </ul> 
        </li> 
        <li class='active has-sub'> 
         <a href='#'><span>DF Rate</span></a> 
          <ul> 
           <li class='last'> 
            <a href='#'><span>DF Rate - Prospective</span></a> 
           </li> 
           <li class='last'> 
            <a href='#'><span>DF Rate - RetroProspective</span></a> 
           </li> 
          </ul> 
        </li> 
        <li><a href='#'><span>Designation</span></a></li> 
        <li class='active has-sub'> 
         <a href='#'><span>Regression Analysis</span></a> 
          <ul> 
           <li class='last'> 
            <a href='#'><span>Regression Test Prospective</span></a> 
           </li> 
           <li class='last'> 
            <a href='#'><span>Regression Test - RetroProspective</span></a> 


          </li> 
         </ul> 
        </li> 
        <li class='active has-sub'><a href='#'><span>Fair Valuation</span></a> 
         <ul> 
          <li class='last'><a href='#'><span>benchmark calculation hedged item</span></a> 
          </li> 
          <li class='last'><a href='#'><span>Test Result</span></a> </li> 
          <li class='last'><a href='#'><span>Delta FV</span></a> </li> 
         </ul> 
        </li> 
        <li class='active has-sub'><a href='#'><span>Amortisation</span></a> 
         <ul> 
          <li class='last'><a href='#'><span>Amortisation</span></a> </li> 
          <li class='last'><a href='#'><span>Reverse Amortisation</span></a> </li> 
          <li class='last'><a href='#'><span>Amortisation, if hedge is ineffective</span></a> 
          </li> 
         </ul> 
        </li> 
        <li class='active has-sub'><a href='#'><span>Output</span></a> 
         <ul> 
          <li class='last'><a href='#'><span>Accounting Entries</span></a> </li> 
          <li class='last'><a href='#'><span>Infor Next Period</span></a> </li> 
         </ul> 
        </li> 
        <li><a href='#'><span>Reports</span></a> </li> 
       </ul> 
      </div> 

CSS

#cssmenu { 
position: relative; 
margin: 0; 
font-family: 'Roboto Condensed'; 
line-height: 1; 
width: 250px; 
} 
.align-right { 
    float: right; 
} 
#cssmenu ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    display: block; 
    } 
    #cssmenu ul li { 
    position: relative; 
    margin: 0; 
    padding: 0; 

    } 
    #cssmenu ul li a { 
     text-decoration: none; 
     cursor: pointer; 
     } 
    #cssmenu > ul > li > a { 
     color: #00802b; 
     text-transform: uppercase; 
     display: block; 
     padding: 20px; 
     border-top: 1px solid #00802b; 
    border-left: 1px solid #000000; 
    border-right: 1px solid #000000; 
    background:url("../images/img04.gif") ; 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); 
    letter-spacing: 1px; 
    font-size: 14px; 
    font-weight: 650; 
    -webkit-transiton: all 0.25s ease-in; 
    -moz-transition: all 0.25s ease-in; 
    -ms-transition: all 0.25s ease-in; 
    -o-transition: all 0.25s ease-in; 
    transition: all 0.25s ease-in; 
    position: relative; 
    } 
    #cssmenu > ul > li:first-child > a { 
     border-top-left-radius: 3px; 
     border-top-right-radius: 3px; 

     } 
    #cssmenu > ul > li:last-child > a { 
     border-bottom-left-radius: 3px; 
     border-bottom-right-radius: 3px; 
     border-bottom: 1px solid #000000; 
     } 
     #cssmenu > ul > li:hover > a, 
    #cssmenu > ul > li.open > a, 
     #cssmenu > ul { 
     background-image: url(../images/content_grey.jpg); 
     color: white; nu_button.jpg) repeat-x; 
     } 
    #cssmenu ul > li.has-sub > a::after { 
     content: ""; 
     position: absolute; 
     display: block; 
    width: 0; 
    height: 0; 
    border-top: 13px solid #00802b; 
    border-botom: 13px solid transparent; 
    border-left: 125px solid transparent; 
    border-right: 125px solid transparent; 
    left: 0; 
    bottom: -13px; 
    bottom: 0px; 
    z-index: 1; 
    opacity: 0; 
    -webkit-transition: all .2s ease; 
    -moz-transition: all .2s ease; 
    -ms-transition: all .2s ease; 
    -o-transition: all .2s ease; 
    transition: all .2s ease; 
} 
#cssmenu ul > li.has-sub > a::before { 
    content: ""; 
    position: absolute; 
    display: block; 
    width: 0; 
    height: 0; 
    border-top: 13px solid #151515; 
    border-botom: 13px solid transparent; 
    border-left: 125px solid transparent; 
    border-right: 125px solid transparent; 
    left: 0; 
    bottom: -12px; 
    bottom: -1px; 
    z-index: 3; 
    opacity: 0; 
    -webkit-transition: all .2s ease; 
    -moz-transition: all .2s ease; 
    -ms-transition: all .2s ease; 
    -o-transition: all .2s ease; 
    transition: all .2s ease; 
} 
#cssmenu ul > li.has-sub::after { 
    content: ""; 
    display: block; 
    position: absolute; 
    width: 0; 
    height: 0; 
    border: 7px solid transparent; 
    border-top-color: #dddddd; 
    z-index: 2; 
    right: 20px; 
    top: 24.5px; 
    pointer-events: none; 
} 
#cssmenu ul > li:hover::after, 
#cssmenu ul > li.active::after, 
#cssmenu ul > li.open::after { 
    border-top-color: #dddddd; 
} 
#cssmenu ul > li.has-sub.open > a::after { 
    opacity: 1; 
    bottom: -13px; 
} 
#cssmenu ul > li.has-sub.open > a::before { 
    opacity: 1; 
    bottom: -12px; 
} 
#cssmenu ul ul { 
    display: none; 
} 
#cssmenu ul ul li { 
    border-left: 1px solid #ccc; 
    border-right: 1px solid #ccc; 
} 
#cssmenu ul ul li a { 
    background: white; 
    display: block; 
    position: relative; 
    font-size: 15px; 
    padding: 14px 20px; 
    border-bottom: 1px solid #dddddd; 
    color: #777777; 
    font-weight: 300; 
    -webkit-transition: all 0.25s ease-in; 
    -moz-transition: all 0.25s ease-in; 
    -ms-transition: all 0.25s ease-in; 
    -o-transition: all 0.25s ease-in; 
    transition: all 0.25s ease-in; 
} 
#cssmenu ul ul li:first-child > a { 
    padding-top: 18px; 
} 
#cssmenu ul ul ul li { 
    border: 0; 
} 
#cssmenu ul ul li:hover > a, 
#cssmenu ul ul li.open > a, 
#cssmenu ul ul li.active > a { 
    background: #e4e4e4; 
    color: #666666; 
} 
#cssmenu ul ul > li.has-sub > a::after { 
    border-top: 13px solid #dddddd; 
} 
#cssmenu ul ul > li.has-sub > a::before { 
    border-top: 13px solid #e4e4e4; 
} 
#cssmenu ul ul ul li a { 
    padding-left: 30px; 
} 
#cssmenu ul ul > li.has-sub::after { 
    top: 18.5px; 
    border-width: 6px; 
    border-top-color: #777777; 
} 
#cssmenu ul ul > li:hover::after, 
#cssmenu ul ul > li.active::after, 
#cssmenu ul ul > li.open::after { 
border-top-color: #666666; 
} 

Answer 1

的问题是，当你重新加载页面，您对DOM的所有更改将丢失。一种选择是，在页面加载时，根据当前路径检查所有人a元素的href属性。如果有匹配，那么你可以应用你的'开放'逻辑。该代码将大致如下：

$(document).ready(function(){ 
    $('a').each(function(){ 
     if($(this).attr('href') == location.pathname.substr(1)) 
      { 
      //apply your 'open' logic here 
      } 
    }); 

    //....Other code 
}); 

*注：此代码的工作，如果你的链接是没有查询字符串只是相对的路径，并没有领先/字符（这是他们怎么会出现在你的问题）。如果它们是绝对的，有查询字符串，或者具有领先的/，我必须在我的答案中的比较之前进行一些字符串处理。