CSS-单击子菜单时，使父菜单保持展开状态并突出显示子菜单。

Question

I have a CSS Vertical menu with submenus. I have added this in an ASP.Net application in the master page. Each menu click navigates to a different aspx pages. When any of submenu inside the expanded parent menu is clicked, the page is redirected to the respective aspx page , but the parent collapses again and does not retain the sub menu higlighted. I want the parent menu to be expanded and the submenu clicked to be highly.

(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

The problem is that when you reload the page, all changes you make to the DOM are lost. One option would be to, upon page load, check all of you a elements' href attributes against the current path. If there is a match, then you could apply your 'opening' logic. The code would look roughly like:

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

    //....Other code
});

*Note: this code works if your links are only relative paths without query strings, and without the leading / character (which which is how they appear in your question). If they are absolute, have query strings, or have the leading / you'll have to do some string processing before the plain $(this).attr('href') == location.pathname.substr(1) comparison in my answer.