多级推菜单太重/对浏览器而言要求很高

Question

此移动多级“推送”菜单（与iPhone上的iOS中的设计相同）需要一些帮助。

我只需要一个提示，以更好地样式化CSS中的多级菜单。

一切正常，但是对于浏览器来说有点沉重，并且在某些旧的Apple iPad中，当我打开菜单时，iPad将下拉所有浏览器，并进入某些子菜单。动作之间也要延迟3-4秒。

首先，所有菜单都是由CSS设计的，位于浏览器右侧，但是只有第一级，其他级别为display: none，因为如果所有多级都已经位于绝对/固定位置，则它将是绝对的当我尝试调整窗口大小时，即使对于台式机来说，这对于浏览器来说也更加繁重，因为我们那里确实有很多层次，而不像这个示例那样。因此，基本上，如果有人打开了第一次菜单，之后所有其他子菜单将display: block。因此，这对于较旧的平板电脑和设备来说可能是一个沉重的负担。

$(document).ready(function() {
  $('#nav-menu .nav-level a').click(function(e) {
    if ($(this).parent().find('.nav-level').length > 0) {
      if ($("body").hasClass("nav-menu-open")) {
        e.preventDefault();
        $(this).parent().find('.nav-level:first').addClass("nav-level-open");
        $(this).closest(".nav-level").addClass("nav-level-over");
        $(this).closest(".nav-level").animate({
          scrollTop: 0
        }, 300);
        $('html,body').animate({
          scrollTop: $("#nav-menu").offset().top
        });
      }
    }

  });

  $(function() {
    $('div.nav-level li').each(function() {
      if ($(this).find('.nav-level').length > 0) {
        $(this).find("a:first").addClass("sub");
      }
    });
  });

  $("#nav-menu .nav-close").on('click tap', function() {
    $("#nav-menu").removeClass("nav-menu-open");
    $("#nav-menu .nav-level").removeClass("nav-level-open nav-level-over");
    $("#nav-menu .nav-head-switch").removeClass("nav-head-active");
    $("#nav-menu .nav-head-switch:first").addClass("nav-head-active");
    $("body").removeClass("nav-menu-open");
    $("#nav-menu").addClass("nav-hidden");
    return false;
  });

  $("#nav-menu .nav-back").on('click tap', function() {
    $(this).closest(".nav-level").removeClass("nav-level-open");
    $(this).closest(".nav-level-over").removeClass("nav-level-over");
    return false;
  });

  $(".nav-trigger").on('click tap', function() {
    $("#nav-menu").removeClass("nav-hidden");
    $("body").toggleClass("nav-menu-open");
    $("#nav-menu").toggleClass("nav-menu-open");
    return false;
  });
});

#nav-menu {
  overflow-y: auto;
}

#nav-menu.nav-hidden .nav-level {
  display: none !important;
}

#nav-menu .nav-level {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-y: auto;
}

#nav-menu .nav-level>* {
  width: 100%;
}

#nav-menu ul {
  list-style: none;
}

#nav-menu,
#nav-menu .nav-level {
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(100%, 0, 0);
}

#nav-menu .nav-level {
  overflow-y: hidden;
}

#nav-menu .nav-level.nav-level-open {
  overflow-y: auto;
}

#nav-menu .nav-level-1 {
  overflow-y: auto;
}

#nav-menu .nav-level-over {
  overflow-y: hidden !important;
}

#nav-menu .nav-head-box {
  transform: translate3d(100%, 0, 0);
}

.nav-level #nav-menu {
  -webkit-transition: transform 0.3s;
  -moz-transition: transform 0.3s;
  transition: transform 0.3s;
}

#nav-menu .nav-head-slide.nav-head-active .nav-head-box,
#nav-menu.nav-menu-open,
#nav-menu .nav-level.nav-level-open,
#nav-menu>.nav-level,
#nav-menu>.nav-level.nav-level-open,
#nav-menu.nav-overlap>.nav-level,
#nav-menu.nav-overlap>.nav-level.nav-level-open {
  transform: translate3d(0, 0, 0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#menu" class="header-tool-inner d-flex align-items-center p-reset nav-trigger">open</a>

<nav class="nav-menu nav-open" id="nav-menu">
  <div class="nav-level nav-level-1">
    <ul class="list-arrows">
      <li>
        <a href="">Level 1</a>
        <div class="nav-level nav-level-2">
          <ul>
            <li>
              <a href="">Level 2</a>
              <div class="nav-level nav-level-3">
                <ul>
                  <a href="">Level 3</a>
                  <a href="">Level 3</a>
                  <a href="">Level 3</a>
                </ul>
              </div>
            </li>
            <li>
              <a href="">Level 2</a>
              <div class="nav-level nav-level-3">
                <ul>
                  <a href="">Level 3</a>
                  <a href="">Level 3</a>
                  <a href="">Level 3</a>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </li>
      <li>
        <a href="">Level 1</a>
        <div class="nav-level nav-level-2">
          <ul>
            <li>
              <a href="">Level 2</a>
              <div class="nav-level nav-level-3">
                <ul>
                  <a href="">Level 3</a>
                  <a href="">Level 3</a>
                  <a href="">Level 3</a>
                </ul>
              </div>
            </li>
            <li>
              <a href="">Level 2</a>
              <div class="nav-level nav-level-3">
                <ul>
                  <a href="">Level 3</a>
                  <a href="">Level 3</a>
                  <a href="">Level 3</a>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</nav>