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库。

Answer 2

我自己找到了解决方案，我添加了$（document）.ready（function（）{}）;进入文件的开头。我把我的变量放在新功能中，其中我放了新功能，所以彼此有3个功能，这就是冲突。现在它的工作，谢谢你的时间伙伴＆lt; 3

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

2 个答案: