title: How to correctly highlight menu items with a jquery ajax menu?
body: <p>I have an ajax menu. My goal is to highlight menu items when clicking on them, but also when changing url. On the one hand, I have this code for the click:</p>
  <pre><code>$('#menuList li a').on('click',function(e){
    $('#menuList li a').removeAttr('aria-current','page').parent().removeClass('activeMenuItem');
    $(this).attr('aria-current','page').parent().addClass('activeMenuItem');
  
    if($(this).next('ul').length &gt; 0){//if there is a dropdown in the menu item
      e.preventDefault(); 
      $('#menuList li ul').removeClass('activated').attr('aria-haspopup',false);//aria expanded false to all dropdown li
      $(this).next('ul').addClass('activated');//hide dropdown
      $(this).attr('aria-haspopup',true);//add aria expanded true to this dropdown
  
    }
  })
  </code></pre>
  <p>This seems to be working fine, but as soon as the page reloads, the active state of the current menu item disappear.Which is normal..</p>
  <p>So I'm using also this code (for main links, and for dropdown links)</p>
  <pre><code> 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;
  }).removeAttr('aria-current','page').attr('aria-current','page').parent().removeClass('activeMenuItem').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
    }).removeAttr('aria-current','page').attr('aria-current','page').parent().parent().addClass('activated').siblings().removeClass('activated');
  </code></pre>
  <p>This code also seems to work correctly.</p>
  <p>The problem is,As soon as I use both at the same time, my menu starts to bug. When I click on a dropdown menu, all the dropdown menus highlight.</p>
  <p>Here is my menu structure :</p>
  <pre><code> &lt;div id=&quot;menu&quot; class=&quot;flex-col-xs-12 flex-col-md-2&quot;&gt;
      &lt;nav role=&quot;navigation&quot; id=&quot;navigation&quot; aria-label=&quot;Menu principal&quot;&gt;
      &lt;ul id=&quot;menuList&quot; aria-label=&quot;submenu&quot;&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;sidebar_heading&quot; aria-control=&quot;guidelineList&quot;&gt;menu item 1&lt;span class='fa fa-caret-down right'&gt;&lt;/span&lt;/a&gt;
        &lt;ul id=&quot;mysumenu1&quot;&gt;
         &lt;li&gt;&lt;a href=&quot;A&quot;&gt;A&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;B&quot;&gt;B&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;C&quot;&gt;C&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;D&quot;&gt;D&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
      &lt;/li&gt;
       &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;sidebar_heading&quot; aria-control=&quot;guidelineList&quot;&gt;menu item 1&lt;span class='fa fa-caret-down right'&gt;&lt;/span&lt;/a&gt;
        &lt;ul id=&quot;mysumenu2&quot;&gt;
         &lt;li&gt;&lt;a href=&quot;A&quot;&gt;A&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;B&quot;&gt;B&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;C&quot;&gt;C&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;D&quot;&gt;D&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;sidebar_heading&quot; aria-control=&quot;guidelineList&quot;&gt;Guidelines&lt;span class='fa fa-caret-down right'&gt;&lt;/span&lt;/a&gt;
     &lt;/li&gt;
  &lt;/ul&gt;&lt;/nav&gt;&lt;/div&gt;
  </code></pre>
  <p>So my question : is there a way to highlight menu item bases on click but also when changing url, keep the dropdown menu ope all in the same function??</p>