推送菜单的子菜单

Question

我想弄清楚如何点击“活动”并让它显示在它下面的子菜单。如果有人可以提供帮助，将不胜感激。如果子菜单可以向下滑动那将是一个主要的优点。

HTML：

<div class="nav-container">
   <nav>
      <div class="nav-bar">
         <div class="module left">
            <a href="index.html">
               <div class="vnu"><img class="logo logo-light" alt="" src="img/headlogo.png"></div>
               <img class="logo logo-dark" alt="" src="img/headlogo.png">
            </a>
         </div>
         <div class="module widget-handle offscreen-toggle right toggle-widget-handle">
            <i class="ti-menu"></i>
         </div>
      </div>
      <div class="offscreen-container bg-dark text-center">
         <div class="close-nav">
            <a href="#">
            <i class="ti-close"></i>
            </a>
         </div>
         <div class="v-align-transform text-center">
            <a href="#">
               <div class="vnu"><img alt="Logo" class="image-xs mb40 mb-xs-24" src="img/notextlogo.png"></div>
            </a>
            <ul class="mb40 mb-xs-24">
               <li class="fade-on-hover">
                  <a href="#">
                     <h5 class="uppercase mb8">HOME</h5>
                  </a>
               </li>
               <li class="fade-on-hover vpf">
                  <a href="#">
                     <h5 class="uppercase mb8">Activities</h5>
                  </a>
               </li>
               <li class="fade-on-hover vpf">
                  <a href="#">
                     <h5 class="uppercase mb8">news</h5>
                  </a>
               </li>
               <li class="fade-on-hover vpf">
                  <a href="#">
                     <h5 class="uppercase mb8">faq</h5>
                  </a>
               </li>
               <li class="fade-on-hover vpf">
                  <a href="#">
                     <h5 class="uppercase mb8">gallery</h5>
                  </a>
               </li>
               <li class="fade-on-hover vpf">
                  <a href="#">
                     <h5 class="uppercase mb8">contact</h5>
                  </a>
               </li>
            </ul>
            <p class="fade-half">
               438 Malvern Road<br>
               Armadale, VIC 3134<br>
               (03) 38237 37263<br>
               hello@mysite.net
            </p>
            <ul class="list-inline social-list">
               <li>
                  <a href="#">
                  <i class="ti-twitter-alt"></i>
                  </a>
               </li>
               <li>
                  <a href="#">
                  <i class="ti-dribbble"></i>
                  </a>
               </li>
               <li>
                  <a href="#">
                  <i class="ti-vimeo-alt"></i>
                  </a>
               </li>
            </ul>
         </div>
      </div>
   </nav>
   ...

这是JS：

if ($('.offscreen-toggle').length) {
    $('body').addClass('has-offscreen-nav');
} else {
    $('body').removeClass('has-offscreen-nav');
}

$('.offscreen-toggle').click(function() {
    $('.main-container').toggleClass('reveal-nav');
    $('nav').toggleClass('reveal-nav');
    $('.offscreen-container').toggleClass('reveal-nav');
});

$('.main-container').click(function() {
    if ($(this).hasClass('reveal-nav')) {
        $(this).removeClass('reveal-nav');
        $('.offscreen-container').removeClass('reveal-nav');
        $('nav').removeClass('reveal-nav');
    }
});

$('.offscreen-container a').click(function() {
    $('.offscreen-container').removeClass('reveal-nav');
    $('.main-container').removeClass('reveal-nav');
    $('nav').removeClass('reveal-nav');
});