jQuery toggleClass仅适用于瞬间，然后它恢复到之前的状态 [英] jQuery toggleClass only works for a split second, then it reverts back to how it previously was

问题描述

所以这是我在stackoverflow上的第一个问题，对不起，如果我问这个问题很糟糕，或者在其他地方找不到答案。

So this is my first question ever on stackoverflow, sorry if I ask this poorly or have failed to find the answer elsewhere.

我正在使用一个简单的toggleClass jQuery函数添加一个名为.slide-out的类，它给整个身体一个左：30％的值。如果我手动添加类，它可以正常工作。但是，如果我使用toggleClass函数添加类，它会像我预期的那样将整个身体滑动超过30％，但会立即将身体移回正常位置。它有点闪烁并且显示30％，然后再次闪烁并回到它原来的位置。

I am using a simple toggleClass jQuery function to add a class called .slide-out that gives the whole body a left: 30% value. If I manually add the class it works properly. But if I use the toggleClass function to add the class it slides the whole body over 30% just like I expected but immediately moves the body back to its normal position. It sort of flashes and appears 30% over and then flashes again and is back to where it was.

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

my js code is wrapped in a document ready function and I haven't found any syntax errors.

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%

JADE：

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")

推荐答案

使用：

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

或点击事件返回 false 。

请参阅： http：//api.jquery .com / event.preventdefault /

这篇关于jQuery toggleClass仅适用于瞬间，然后它恢复到之前的状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！