jQuery 菜单和下拉菜单，如何添加活动状态并在重新加载页面时保持活动状态？

Question

我有以下jQuery代码

/***********************************************/
 /* PAGES : ADD ACTIVE SIDEBAR MENU CLASS */
 /***********************************************/
 

 var url = window.location;
 $('#menuList li a').filter(function() {
  return this.href == url;
}).attr('aria-current','page').parent().addClass('activeMenuItem');
/***********************************************/
/* PAGES : DROPDOWN MENU */
/***********************************************/

$('#menuList li a').click(function(){      
 
$('#menuList li a').removeAttr('aria-current','page').parent().removeClass('activeMenuItem');
  $(this).attr('aria-current','page').addClass('activeMenuItem');
  if($(this).next('ul').length>0){
    event.preventDefault();
    $('#menuList li a ul').removeClass('activated');
    $('#menuList li a').attr('aria-expanded',false);
     $(this).attr('aria-expanded',true);
    $(this).next('ul').slideToggle();
  }
   });

第一个是在加载和更改页面时在第一级 ul >li>a 添加活动状态。第二个是在单击具有下拉菜单的 ul>li>a 时打开下拉菜单。

如何缩短和混合这两段代码，以便始终使当前菜单项处于“活动状态” 无论它是什么级别，打开下拉菜单并在更改页面时保持打开状态.. 我首先想到的是为子菜单构建选项卡，这样我也许可以避免“重新加载页面”？

Answer 1

好的，我终于找到了解决方案，但仍然认为它可以改进..任何帮助将不胜感激！这是我的工作代码..

 /***********************************************/
 /* PAGES : ADD ACTIVE SIDEBAR MENU CLASS on LOAD */
 /***********************************************/
 var url = window.location;//if the page path (main menu) meet the page url
 $('#menuList li a').filter(function() {//add aria and active state to mainmenu li a on load
  return this.href == url;
}).attr('aria-current','page').parent().addClass('activeMenuItem');

 $('#menuList ul li a').filter(function() {//if the page path(dropdown) meet the page url
  return this.href == url;//add aria and active state to dorpdown li a on load
}).attr('aria-current','page').parent().parent().addClass('activated');
 /***********************************************/
 /* PAGES : DROPDOWN MENU */
 /***********************************************/

 $('#menuList li a').click(function(){      //if click on menu link
   $('#menuList li').removeClass('activeMenuItem');//remove active state from all links

   if($(this).next('ul').length > 0){//if there is a dropdown in the menu item
    event.preventDefault();//prevent from following the link
    $('#menuList li').removeClass('activeMenuItem'); //remove active state
    $('#menuList li a').attr('aria-expanded',false);//aria expanded false to all dropdown li
    $('#menuList ul').removeClass('activated');//hide dropdown
    $(this).attr('aria-expanded',true);//add aria expanded true to this dropdown
    $(this).next().slideToggle();//show the dropdown
    $(this).parent().addClass('activeMenuItem');//add active state to this menu item
  }

});

jQuery 菜单和下拉菜单，如何添加活动状态并在重新加载页面时保持活动状态？

jQuery menu and dropdown, how to add active state and keep it while reloading page?

jquery

menu

dropdown