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

*注：此代碼的工作，如果你的鏈接是沒有查詢字符串只是相對的路徑，並沒有領先/字符（這是他們怎麼會出現在你的問題）。如果它們是絕對的，有查詢字符串，或者具有領先的/，我必須在我的答案中的比較之前進行一些字符串處理。