title: Unable to remove class after using toggle class with jQuery
body: <p>I have three navigations in one page and I'm trying to show the active links for each nav. For some reason the third nav isn't working correctly. For example, if you click on "chapter 2" or "chapter 3" or "chapter 4", "chapter 1" stays active. I don't know if it's because "Chapter 1" and "sublink4" from the middle nav have the same url. I tried removing the active class of the third nav, but it's not working. Unfortunately the snipping isn't working as it is on my computer. I only used target="_blank" on the snippet, not only my local machine since you can't click on links on the snippet without restarting the snippet.Thanks</p>
  
  <p><a href="https://i.stack.imgur.com/fT0wd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fT0wd.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(window).on('load', function () {
      $('body').setActiveMenuItem();
      $('body').setActiveMenuItem2();
      $('body').setActiveMenuItem3();
  });
  
  $(document).ready(function () {
  
      //first nav
      $.fn.setActiveMenuItem2 = function () {
  
          $.each($('.nav1').find('li'), function () {
              $(this).toggleClass('active',
                  window.location.pathname.indexOf($(this).find('a').attr('href')) &gt; -1);
          });
  
      }
  
      //middle nav
      $.fn.setActiveMenuItem3 = function () {
  
          $.each($('.nav3').find('li'), function () {
              $(this).toggleClass('active3',
                  window.location.pathname.indexOf($(this).find('a').attr('href')) &gt; -1);
          });
  
      }
  
      //third nav 
      $.fn.setActiveMenuItem = function () {
  
          $.each($('.nav2').find('li'), function () {
  
              $(this).removeClass('active2');
  
              $(this).toggleClass('active2',
                  window.location.pathname.indexOf($(this).find('a').attr('href')) &gt; -1);
          });
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>li.active {
      background-color: red;
  }
  li.active2 {
      background-color: blue;
  }
  li.active {
      background-color: yellow;
  }
  
  .nav1 ul, .nav3 ul {
      display: flex;
      justify-content: space-between;
  }
  nav {
      margin-bottom: 50px;
  }
  .wrapper {
      width: 400px;
      margin: auto;
  }
  li {
      list-style: none;
      background-color: aliceblue;
      padding: 10px;
  }
  li a {
      padding: 10px;
  }
  li a:hover {
      color: red;
      background: black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="wrapper"&gt;
        &lt;nav class="nav1"&gt;
            &lt;ul&gt;
               &lt;li&gt;  &lt;a href="/link-1" target="_blank"&gt;Link 1&lt;/a&gt;  &lt;/li&gt;
               &lt;li&gt;&lt;a href="/link-2" target="_blank" &gt;Link 2&lt;/a&gt; &lt;/li&gt;
               &lt;li&gt;&lt;a href="/link-3" target="_blank"&gt;Link 3&lt;/a&gt; &lt;/li&gt;
               &lt;li&gt;&lt;a href="/link-4" target="_blank"&gt;Link 4&lt;/a&gt; &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/nav&gt;
  
          &lt;nav class="nav3"&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="/link-1/sublink-1" target="_blank"&gt;Subink 1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="/link-2/sublink-2" target="_blank"&gt;Subink 2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="/link-2/sublink-3" target="_blank"&gt;Subink 3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/nav&gt;
  
          &lt;nav class="nav2"&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="/link-1/sublink-1/chapter-1" target="_blank"&gt;Chapter 1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="/link-1/sublink-1/chapter-2" target="_blank"&gt;Chapter 2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="/link-1/sublink-1/chapter-3" target="_blank"&gt;Chapter 3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/nav&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>