javascript - 垂直滑动导航菜单不起作用

Question

我想再问你一件事。所以我想让我的垂直菜单成为一个垂直滑动菜单，它在触发时推送网站内容。我切换它的功能不起作用(我不知道过渡和平移等其他效果是否也有效，因为菜单事件类未切换)。
当我点击我的按钮时，没有任何显示，甚至错误......我真的不知道问题出在哪里。
这是我的代码:

(function() {
  var bodyEl = $('body'),
    mobileicon = bodyEl.find('.mobile-icon');

  mobileicon.on('click', function(e) {
    bodyEl.toggleClass('active-mobile-menu');
    e.preventDefault();

  });

});

/*-----------------------------------------------
Mobile Icon Style
-----------------------------------------------*/

.mobile-icon {
  position: absolute;
  display: block;
  width: 40px;
  z-index: 5;
}
.mobile-icon:before {
  width: 100%;
  font-size: 2em;
  font-family: "ElegantIcons";
  font-weight: bold;
  text-align: center;
  content: "\64";
}
.mobile-icon:hover {
  color: white;
  background: black;
}
/*----------------------------------------------
Mobile Menu style
-----------------------------------------------*/

.mobile-show {
  dispay: block;
}
.mobile-menu {
  overflow: scroll;
  position: fixed;
  height: 100%;
  width: 70%;
  background: white;
  z-index: 1000;
  transform: translate3d(-100%, 0, 0);
  transition: transform 0.4s ease;
}
.active-mobile-menu div {
  transform: translate3d(0, 0, 0);
}
.active-mobile-menu .mobile-menu {
  transform: translate3d(100%, 0, 0);
}
.mobile-menu ul {
  top: 10.2%;
  color: black;
  position: relative;
  text-align: left;
  font-weight: bold;
}
.mobile-menu li a {
  display: block;
  padding: 4% 0;
  border-bottom: 1px solid black;
}
.mobile-menu > ul> li:hover > a,
.mobile-menu > ul> li:hover > .sub-menu > li:hover > a,
.mobile-menu > ul .sub-menu .sub-menu > li:hover > a {
  background-color: #111;
  color: #fff;
}
.mobile-menu ul li ul {
  height: 100%;
  width: 100%;
  visibility: hidden;
  display: none;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
  background: #fff;
  border: none;
  position: relative;
}
.mobile-menu ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

<span class="mobile-icon"></span>
<div class="mobile-menu">
  <header class="mobile-header">
    <div class="mobile-branding">
      <!--here is my logo code,its long so i don't wanna to slow you down-->
    </div>
  </header>
  <ul class="mobile-menu-ul">
    <div class="caret"></div>
    <?php wp_nav_menu(array ( 'theme_location'=>'new-menu', 'container' => '', 'items_wrap' => '%3$s' )); ?>
  </ul>
</div>

Answer 1

当我 run your code through jsbin ，切换工作。我必须包含 jQuery 库，正如您在行中看到的那样

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

我怀疑您没有在页面上正确加载 jQuery 库。