title: HTML Menu set Parent item class if child item has class
body: <p>I have an HTML menu that has <code>.active</code> classes.</p>
  
  <pre><code>&lt;div class="collapse navbar-collapse pull-left" id="navbar-collapse"&gt;
  &lt;ul class="nav navbar-nav"&gt;
      &lt;li&gt;&lt;a href="/home"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li class="dropdown"&gt;
          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Account &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;ul class="dropdown-menu" role="menu"&gt;
              &lt;li class="active"&gt;&lt;a href="/account-details"&gt;Account Details&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="/contacts/contacts"&gt;Contacts&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The <code>active</code> classes are set on the <code>&lt;li&gt;</code> items (parent and sub items)</p>
  
  <p>How can I use javascript to set the active class on the items if the url equals the <code>href</code> of the menu item and also set its parent item with the active class</p>
  
  <p>I tried to do it with this javascript, but it didn't work.</p>
  
  <pre><code>&lt;script&gt;
    $(function() {
      $('#navbar-collapse li').each(function() {
        if(this.href.indexOf(window.location.pathname) === 0) {
          $(this).addClass('active');
        } else {
          // case when something was set to active by the server
          $(this).removeClass('active');
        }
      });
    });
  &lt;/script&gt;
  </code></pre>