title: How do I get a menu grandchild to show on click?
body: <p>I believe this issue is with the JavaScript/Jquery 3.3.1, not assessing the grandchild of the menu, but I am lost on how to get this accomplished. Any help would be appreciated. </p>
  
  <p>The HTML is a menu block create in Drupal 7. The leaf class is not used in my CSS.</p>
  
  <pre><code>&lt;div id="block-menu-menu-demo" class="block block-menu contextual-links-region"&gt;
  &lt;h2&gt;Family &amp;amp; Community Menu&lt;/h2&gt;
  &lt;ul class="menu"&gt;
      &lt;li class="first leaf"&gt;&lt;a href="/fce"&gt;Main Page&lt;/a&gt;&lt;/li&gt;
      &lt;li class="leaf"&gt;&lt;a href="/sde/families"&gt;For Families&lt;/a&gt;&lt;/li&gt;
      &lt;li class="leaf"&gt;&lt;a href="/sde/schools"&gt;For Schools&lt;/a&gt;&lt;/li&gt;
      &lt;li class="leaf"&gt;&lt;a href="/sde/communities"&gt;For Communities&lt;/a&gt;&lt;/li&gt;
      &lt;li class="last expanded"&gt;&lt;a href="/sde/parent-community-engagement"&gt;Related Topics&lt;/a&gt;
          &lt;ul class="menu"&gt;
              &lt;li class="first leaf"&gt;&lt;a href="/sde/21cclc"&gt;21st CCLC&lt;/a&gt;&lt;/li&gt;
              &lt;li class="leaf"&gt;&lt;a href="/sde/summer-learning"&gt;Summer Learning&lt;/a&gt;&lt;/li&gt;
              &lt;li class="last expanded"&gt;&lt;a href="/sde/chronic-absenteeism"&gt;Chronic Absenteeism&lt;/a&gt;
                  &lt;ul class="menu"&gt;
                      &lt;li class="first last leaf"&gt;&lt;a href="/absenteeism-tool-kit"&gt;Toolkit&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS could be cleaned up, but it works.</p>
  
  <pre><code>    /*SIDE NAV*/
  
  #block-menu-menu-demo {
      background-color: #dcdcdc;
      border-radius: 5px;
      color: #FFF;
      display: block;
      font-family: 'RobotoLight', arial, helvetica, sans-serif;
      line-height: .8em;
      margin: 20px auto;
      padding: 0px;
      overflow: hidden;
      width: 250px;
      z-index: 77;
  }
  #block-menu-menu-demo a {
      border-bottom: none !important;
      color: #FFF !important;
      display: block !important;
      font-size: 14px;
      text-decoration: none;
      padding-left: 5px;
  }
  #block-menu-menu-demo ul {
      border-radius: 0;
      margin: 0;
  }
  #block-menu-menu-demo li {
      background-color: #4176c3;
      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
      list-style: none;
      padding-bottom: 12px;
      padding-left: 0px;
      padding-top: 12px;
  }
  #block-menu-menu-demo li:hover {
      background-color: #96b9ed;
      color: #235196 !important;
  }
  /*Adding this creates a hover on li since a is inside the li and we can't change that.*/
  
  #block-menu-menu-demo li:hover&gt;a {
      background-color: transparent !important;
      color: #235196 !important;
  }
  #block-menu-menu-demo li a:hover {
      color: #235196 !important;
  }
  #block-menu-menu-demo li a:active {
      color: #000 !important;
  }
  #block-menu-menu-demo h2 {
      background-color: #2b3c4f;
      border-bottom: none !important;
      color: #FFF;
      font-size: 1em;
      margin: 0;
      padding: 8px 0 8px 12px;
  }
  /*Expanded subnav action*/
  
  #block-menu-menu-demo h2, #block-menu-menu-demo ul.expanded {
      position: relative;
  }
  #block-menu-menu-demo h2:after, #block-menu-menu-demo .expanded:after {
      border: solid transparent;
      border-radius: 0;
      border-width: 7px;
      content: " ";
      height: 0;
      left: 10px;
      position: absolute;
      pointer-events: none;
      top: 100%;
      width: 0;
  }
  #block-menu-menu-demo h2:after {
      border-top-color: #2b3c4f;
  }
  #block-menu-menu-demo .menu {
      padding-left: 0px;
  }
  #block-menu-menu-demo .expanded {
      margin-bottom: 0;
  }
  #block-menu-menu-demo .expanded ul {
      list-style: none;
      margin-top: 12px;
      border-radius: 0;
  }
  #block-menu-menu-demo ul.expanded:after {
      border-top-color: #69afff;
  }
  #block-menu-menu-demo .expanded ul.menu {
      display: none;
      width: 250px;
  }
  #block-menu-menu-demo li.expanded {
      background-image: url('http://www.ok.gov/sde/sites/ok.gov.sde/files/side_menu_droparrow-clear.png');
      background-position: right center;
      background-repeat: no-repeat;/* Or size of icon + spacing */
  }
  #block-menu-menu-demo li:last-child, #block-menu-menu-demo ul.expanded {
      border-bottom: none;
  }
  /*Expanded subnav*/
  
  #block-menu-menu-demo li li {
      background-color: #eee;
      padding-left: 5px;/*width: 250px;*/
  }
  #block-menu-menu-demo li li a {
      color: #555 !important;
  }
  #block-menu-menu-demo li li a:active {
      color: #000 !important;
  }
  #block-menu-menu-demo li li:hover {
      background-color: #CCC !important;
  }
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>    // JavaScript Document
  $(document).ready(function () {
      $('#block-menu-menu-demo &gt; ul &gt; li &gt; a').click
  
          (function () {
          $('#block-menu-menu-demo li').removeClass('first');
          $(this).closest('li').addClass('first');
          var checkElement = $(this).next();
  
          if ((checkElement.is('ul')) &amp;&amp; (checkElement.is(':visible'))) {
              $(this).closest('li').removeClass('first');
              checkElement.slideUp('normal');
          }
          if ((checkElement.is('ul')) &amp;&amp; (!checkElement.is(':visible'))) {
              $('#block-menu-menu-demo ul ul:visible').slideUp
  
                  ('normal');
              checkElement.slideDown('normal');
          }
          if ($(this).closest('li').find('ul').children().length === 0) {
              return true;
          } else {
              return false;
          }
      });
  });
  </code></pre>