Question

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

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

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

Answer 1

使用：

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

或者为点击事件返回false。

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

jQuery toggleClass仅适用于瞬间，然后它恢复到之前的状态

1 个答案: