title: jQuery dropdown toggle find active li and keep the dropdown open
body: <p>I've got some trouble with a custom dropdown toggle.</p>
  
  <p>The menu looks like this in HTML and I do not have the option to edit the code for that so I have to solve it with css/jQuery:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;a href=""&gt;Link"&lt;/a&gt;&lt;/li&gt;   &lt;-- when this is active it has class="active"
      &lt;li&gt;&lt;a href=""&gt;Link"&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Link"&lt;/a&gt;&lt;/li&gt;
      &lt;li class=""&gt;                   &lt;-- this is always empty
          &lt;span&gt;Title&lt;/span&gt;
          &lt;ul&gt;
              &lt;li class="active"&gt;&lt;a href=""&gt;Link&lt;/a&gt;&lt;/li&gt;   &lt;-- this is currently active
              &lt;li&gt;&lt;a href=""&gt;Link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I'm a bit afraid to ask but here is what I've got:</p>
  
  <pre><code>$('.menu li[class=""] span').click(function() {
      const self = $(this).parent();
      self.toggleClass("menu-open");
  });
  
  if($('.menu li[class=""]').find('li.active').length !== 0){
      $(this).addClass("menu-open");
  }
  </code></pre>
  
  <p>The first function which actually works pretty well checks if there is a <code>li</code> with a <code>class=""</code> as this indicates it has a submenu. Clicking the <code>span</code> in the <code>li</code> toggles the class <code>menu-open</code> which results in either having the menu open or collapsed.</p>
  
  <p>Now I would like to keep the menu open when I'm on a page that's in the submenu. If that's the case the <code>li</code> in the sub <code>ul</code> is active, the parent <code>li</code> is not.</p>
  
  <p>Unfortunately that doesn't work. I also tried different approaches such as <code>hasClass</code>, <code>children</code> but none of it worked either. I pinpointed the issue mostly to:</p>
  
  <pre><code>$(this).addClass("menu-open");
  </code></pre>
  
  <p>as it seems that <code>$(this)</code> was never found. If I change $(this) to $('body') for example and add a hide(), I clearly see that it works because I get a blank page :)</p>
  
  <p>Any advise on what the issue is would be much appreciated as I nearly gave up now.</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>$(function() {
  
      $('.menu li[class=""] span').click(function() {
          const self = $(this).parent();
          self.toggleClass("menu-open");
      });
  
      if($('.menu li[class=""]').find('li.active').length !== 0){
          $(this).addClass("menu-open");
   }
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.menu{width:200px}
  ul{list-style-type:none}
  li{background:#ccc;margin:2px}
  span{display:block}
  .menu li[class=""]{
      height:20px;
      overflow:hidden;
      cursor:pointer;
  }
  .menu-open{
      height:auto;
      overflow:visible;
      cursor:pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="menu"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li class=""&gt;
        &lt;span&gt;Title&lt;/span&gt;
        &lt;ul&gt;
          &lt;li class="active"&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;li&gt;
      &lt;li class=""&gt;
        &lt;span&gt;Title&lt;/span&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>