Problem about keep current menu shows

Problem about keep current menu shows

This is my html menu code:
  1. <!--sidebar start-->
  2.       <aside>
  3.           <div id="sidebar"  class="nav-collapse ">
  4.               <!-- sidebar menu start-->
  5.               <ul class="sidebar-menu" id="nav-accordion">
  6.                   <li class="sub-menu">
  7.                       <a class="active" href="#">
  8.                           <i class="icon-user"></i>
  9.                           <span>Khách hàng</span>
  10.                       </a>
  11.                       <ul class="sub">
  12.                           <li class="active"><a href="index.php?com=khach_hang&op=list">Danh sách</a></li>
  13.                           <li><a href="index.php?com=khach_hang&op=add">Thêm mới</a></li>
  14.                       </ul>
  15.                   </li>
  16.                   <li class="sub-menu">
  17.                       <a href="#" >
  18.                           <i class="icon-sitemap"></i>
  19.                           <span>Loại sản phẩm</span>
  20.                       </a>
  21.                       <ul class="sub">
  22.                           <li><a href="index.php?com=loai_sp&op=list">Danh sách</a></li>
  23.                           <li><a href="index.php?com=loai_sp&op=add">Thêm mới</a></li>
  24.                       </ul>
  25.                   </li>
  26.             </ul>
  27.               <!-- sidebar menu end-->
  28.           </div>
  29.       </aside>
  30. <!--sidebar end-->
And here is my CSS code:

  1. ul.sidebar-menu , ul.sidebar-menu li ul.sub{
  2.     margin: -2px 0 0;
  3.     padding: 0;
  4. }
  5. ul.sidebar-menu {
  6.     margin-top: 75px;
  7. }
  8. #sidebar > ul > li > ul.sub {
  9.     display: none;
  10. }
  11. #sidebar > ul > li.active > ul.sub, #sidebar > ul > li > ul.sub > li > a {
  12.     display: block;
  13. }
  14. ul.sidebar-menu li ul.sub li{
  15.     background: #35404D;
  16.     margin-bottom: 0;
  17.     margin-left: 0;
  18.     margin-right: 0;
  19. }
  20. ul.sidebar-menu li ul.sub li:last-child{
  21.     border-radius: 0 0 4px 4px;
  22.     -webkit-border-radius: 0 0 4px 4px;
  23. }
  24. ul.sidebar-menu li ul.sub li a {
  25.     font-size: 12px;
  26.     padding: 6px 0;
  27.     line-height: 35px;
  28.     height: 35px;
  29.     -webkit-transition: all 0.3s ease;
  30.     -moz-transition: all 0.3s ease;
  31.     -o-transition: all 0.3s ease;
  32.     -ms-transition: all 0.3s ease;
  33.     transition: all 0.3s ease;
  34.     color: #aeb2b7;
  35. }
  36. ul.sidebar-menu li ul.sub li a:hover, ul.sidebar-menu li ul.sub li.active a {
  37.     color: #FF6C60;
  38.     -webkit-transition: all 0.3s ease;
  39.     -moz-transition: all 0.3s ease;
  40.     -o-transition: all 0.3s ease;
  41.     -ms-transition: all 0.3s ease;
  42.     transition: all 0.3s ease;
  43.     display: block;
  44. }
  45. ul.sidebar-menu li {
  46.     /*line-height: 20px !important;*/
  47.     margin-bottom: 5px;
  48.     margin-left:10px;
  49.     margin-right:10px;
  50. }
  51. ul.sidebar-menu li.sub-menu{
  52.     line-height: 15px;
  53. }
  54. ul.sidebar-menu li a span{
  55.     display: inline-block;
  56. }
  57. ul.sidebar-menu li a{
  58.     color: #aeb2b7;
  59.     text-decoration: none;
  60.     display: block;
  61.     padding: 15px 0 15px 10px;
  62.     font-size: 12px;
  63.     outline: none;
  64.     -webkit-transition: all 0.3s ease;
  65.     -moz-transition: all 0.3s ease;
  66.     -o-transition: all 0.3s ease;
  67.     -ms-transition: all 0.3s ease;
  68.     transition: all 0.3s ease;
  69. }
  70. ul.sidebar-menu li a.active, ul.sidebar-menu li a:hover, ul.sidebar-menu li a:focus {
  71.     background: #35404d;
  72.     color: #fff;
  73.     display: block;
  74.     border-radius: 4px;
  75.     -webkit-border-radius: 4px;
  76.     -webkit-transition: all 0.3s ease;
  77.     -moz-transition: all 0.3s ease;
  78.     -o-transition: all 0.3s ease;
  79.     -ms-transition: all 0.3s ease;
  80.     transition: all 0.3s ease;
  81. }
  82. ul.sidebar-menu li a i {
  83.     font-size: 15px;
  84.     padding-right: 6px;
  85. }
  86. ul.sidebar-menu li a:hover i, ul.sidebar-menu li a:focus i {
  87.     color: #FF6C60;
  88. }
  89. ul.sidebar-menu li a.active i {
  90.     color: #FF6C60;
  91. }
The problem is I use jQuery code as below but I couldn't add class "active" in my menu code (in order to keep current sub-menu when clicking it):

  1. <script src="{$src}/js/jquery.js"></script>
  2. <script src="{$src}/js/jquery-1.8.3.min.js"></script>
  3. $(document).ready(function () {
  4.         $('ul.sidebar-menu > li.sub-menu a span').click(function () {
  5.             $(this).parent().find('.active').removeClass('active');
  6.             $(this).parent().addClass('active');
  7.         });
  8.        
  9.         $('ul.sidebar-menu > li.sub-menu ul.sub > li a').click(function () {
  10.             $(this).parent().find('.active').removeClass('active');
  11.             $(this).parent().addClass('active');
  12.         });        
  13. });
I searched and tried many ways, but none of them works = = Hope anyone can help me solve this case. I'll be very thankful to you!!