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に対して行ったすべての変更が失われることです。 1つのオプションは、ページの読み込み時に、すべてのa要素の 'href'属性を現在のパスと照合することです。一致するものがあれば、「開始」ロジックを適用することができます。注*

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

    //....Other code 
}); 

：このコードは、あなたのリンクはクエリ文字列のない相対パスのみである場合に動作し、（彼らはあなたの質問に表示される方法です）大手/文字のないコードは、おおよそ次のようになります。もし彼らが絶対的な場合、クエリ文字列を持っているか、先頭に/がある場合は、私の答えで平文$(this).attr('href') == location.pathname.substr(1)の比較の前にいくつかの文字列処理を行う必要があります。