jQuery toggleClass 只工作一瞬间，然后恢复到以前的状态

Question

所以这是我在 Whosebug 上的第一个问题，如果我问得不好或者没能在其他地方找到答案，我深表歉意。

我正在使用一个简单的 toggleClass jQuery 函数来添加一个名为 .slide-out 的 class，它给整个 body 一个 left: 30% 值。如果我手动添加 class 它会正常工作。但是，如果我使用 toggleClass 函数添加 class，它会像我预期的那样将整个 body 滑动超过 30%，但会立即将 body 移回其正常位置。它有点闪烁并出现 30%，然后再次闪烁并回到原来的位置。

我的 js 代码封装在文档就绪函数中，我没有发现任何语法错误。

JS:

$( document ).ready(function() {

  $("#main-menu-btn").click(function() {
      $('body').toggleClass("slide-out");
  });

});

SASS:

body
    height: 100%
    position: relative
    left: 0

.slide-out
    left: 30%

杰德：

doctype html
html(lang="en")
    head
      title jade
      meta(charset="utf-8")
      meta(name="viewport", content="width=device-width, initial-scale=1")
      link(rel="shortcut icon", href="/assets/img/favicons/favicon.ico")  
      link(rel="stylesheet", href="/assets/css/main.css")

    body(class="slide-out")

        .logo
        h1 Whole Life Sports
        .main-menu
            ul
                li Home
                li Stuff
                li Things
        .page-nav
            nav
                a(href="", id="main-menu-btn") Main Menu
                a(href="") Home
                a(href="") Kids Games
                a(href="") Max Sport Camp
                a(href="") The Big Think


    script(src="/assets/js/jquery-2.1.1.min.js")
    script(src="/assets/js/functions.js" type="text/javascript")

Answer 1

使用：

 $("#main-menu-btn").click(function(event) {
      $('body').toggleClass("slide-out");
      event.preventDefault();
  });

或return false点击事件。

参见：http://api.jquery.com/event.preventdefault/

jQuery toggleClass 只工作一瞬间，然后恢复到以前的状态

jQuery toggleClass only works for a split second, then it reverts back to how it previously was

jquery

sass

pug

toggleclass