侧边栏菜单在打开的子菜单上隐藏内容

Question

我为移动视图创建了侧边栏菜单，但是在打开所有子菜单时会丢失一些内容。表示当我单击或打开任何子菜单时，它会隐藏其最后的内容。我试图通过单击外部关闭菜单，但它不起作用。我想通过打开所有子菜单来显示所有内容，并想通过单击外部将其关闭。

(function($) {
  var ico = $('<i class="fa fa-caret-right"></i>');
  $('nav#menu li:has(ul) > a').append(ico);

  $('nav#menu li:has(ul)').on('click', function() {
    $(this).toggleClass('open');
  });

  $('a#toggle').on('click', function(e) {
    $('html').toggleClass('open-menu');
    return false;
  });

  //$('body,html').on('click',function(){
  //$('html').removeClass('open-menu');
  //});


  $('div#overlay').on('click', function() {
    $('html').removeClass('open-menu');
  })

})(jQuery) <
/script> <
script type = "text/javascript" >

  var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script');
  ga.type = 'text/javascript';
  ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(ga, s);
})();

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

div#overlay {
  display: none;
}

a#toggle {
  position: fixed;
  top: 50px;
  left: 1px;
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.4);
  text-align: center;
  color: white;
  display: none;
}

a#toggle i {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

main#content {
  padding: 10px;
}

#menu {
  text-align: center;
  transition: all ease-out 0.3s;
}

#menu a {
  color: white;
}

#menu ul {
  margin: 0;
  padding: 0;
  background-color: rgba(22, 160, 133, 0.8);
}

#menu ul li {
  display: inline-block;
  position: relative;
}

#menu ul li>a {
  display: inline-block;
  padding: 10px;
}

#menu ul li>a>i {
  margin-left: 15px;
  transition: all ease-out 0.3s;
  -webkit-transition: all ease-out 0.1s;
}

#menu ul li ul {
  display: none;
  position: absolute;
  top: 38px;
  width: 200px;
  text-align: left;
}

#menu ul li ul li {
  display: block;
}

#menu ul li ul li a {
  display: block;
}

#menu ul li:hover>a {
  background-color: rgba(0, 0, 0, 0.3);
}

#menu ul li:hover>a>i {
  transform: rotateZ(90deg);
}

#menu ul li:hover ul {
  display: block;
}

@media screen and (max-width: 767px) {
  a#toggle {
    display: block;
  }
  main#content {
    margin-top: 65px;
    transition: all ease-out 0.3s;
  }
  #menu {
    position: fixed;
    width: 250px;
    height: 100%;
    top: 91px;
    left: 0;
    overflow: scroll;
    overflow-y: auto;
    background-color: #FFBD33;
    transform: translateX(-250px);
  }
  #menu ul {
    text-align: left;
    background-color: transparent;
  }
  #menu ul li {
    display: block;
  }
  #menu ul li a {
    display: block;
  }
  #menu ul li a>i {
    float: right;
  }
  #menu ul li ul {
    display: none;
    position: static;
    width: 100%;
    background-color: rgba(22, 160, 133, 0.2);
  }
  #menu ul li:hover>ul {
    display: none;
  }
  #menu ul li:hover>a>i {
    transform: rotateZ(0);
  }
  #menu ul li.open>a {
    background-color: rgba(0, 0, 0, 0.3);
  }
  #menu ul li.open>a>i {
    transform: rotateZ(90deg);
  }
  #menu ul li.open>ul {
    display: block;
  }
  div#overlay {
    display: block;
    visibility: hidden;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    transition: all ease-out 0.3s;
    z-index: 1;
    opacity: 0;
  }
  html.open-menu {
    overflow: auto;
  }
  html.open-menu div#overlay {
    visibility: visible;
    opacity: 1;
    width: calc(-150%);
    left: 250px;
  }
  html.open-menu a#toggle,
  html.open-menu main#content {
    transform: translateX(0px);
  }
  html.open-menu nav#menu {
    z-index: 3;
    transform: translateX(0);
  }
}

<div class="header-mobile-nav menu-drop-fly ps-container collapse" id="demo">
  <a id="toggle" href="#"><i class="fa fa-bars"></i></a>

  <nav id="menu">

    <ul>
      <li><a href="http://www.rimt.ac.in/">Home</a></li>
      <li><a href="about-us.php">About Us</a></li>
      <li><a href="recognitions-approvals.php">Recognitions & Approvals</a></li>
      <li><a href="#">Campus</a>
        <ul>
          <li><a href="facilities.php">Facilities</a></li>
          <li><a href="life-at-campus.php">Life at RIMT</a></li>
          <li><a href="latest-event.php">News & Events</a></li>
        </ul>
      </li>
      <li><a href="program-offered.php">Our Programs</a>
      </li>
      <li><a href="#">Placement</a>
        <ul>
          <li><a href="placement-news.php">Placement News & Notice</a></li>
          <li><a href="rimt-advantages.php">RIMT Advantages</a></li>
          <li><a href="recruiters.php">Recruiters</a></li>
          <li><a href="training-and-placement.php">Training & Placement</a></li>
          <li><a href="placement-cell.php">Placement Cell</a></li>
        </ul>
      </li>
      <li><a href="#">Ph D/ M Phil</a>
        <ul>
          <li><a href="research-work.php">Circular</a></li>
        </ul>
      </li>
      <li><a href="internationalstudents.php">International Students</a></li>
      <li><a href="anti-ragging-and-student-grievance.php">Anti Ragging & Student Grievance</a></li>
      <li><a href="erp.rimt.ac.in:8069/web">ERP Dashboard</a></li>
      <li><a href="jobs.php">Job Openings</a></li>
      <li><a href="#">Online Payment</a>
        <ul>
          <li><a href="http://www.rimt.ac.in/sm/pay.php">HDFC Payment Gateway</a></li>
          <li><a href="https://www.payumoney.com/customer/users/paymentOptions/#/C161170AFB9E361F65F930FDB14FDD34/wwwrimtacin/178237">PayU Payment Gateway</a></li>
          <li><a href="http://m.p-y.tm/rimtgnr_web">Paytm</a></li>
        </ul>
      </li>
      <li><a href="education-loan-assistance.php">Education Loan Assistance</a></li>
      <li><a href="/help">RIMT Support</a></li>
      <li><a href="apply-now.php">Contact Us</a></li>
    </ul>
  </nav>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>