我在 Codepen 上的一个项目不再工作了

Question

如主题名称所述，我的一个项目不再按预期运行。它昨晚工作。唯一有帮助的是删除所有 javascript 代码。注释掉所有代码没有帮助，只能删除所述代码。

代码本身并没有什么特别之处，只是一些流畅的滚动和一些动画。签入 codepen 不会产生任何错误，在浏览器控制台中也不会。它可以是什么？我注意到 codepen 已被更改，也许他们搞砸了我的项目？我所有其他使用 JS 代码的项目都可以正常工作，但这个不行：Pen

这是js代码：

var crock = 0;
var hash = "";
$(document).ready(function() {
  $("#navbar a").on("click", function(event) {
    if (this.hash !== "") {
      event.preventDefault();

      hash = this.hash;

      $("html, body").animate(
        {
          scrollTop: $(hash).offset().top
        },
        800,
        function() {
          window.location.hash = hash;
        }
      );
    }
  });

  if (!$("#menu").is(":checked")) {
    console.log("unchecked");
    $(".container").animate(
      {
        width: "75%"
      },
      "slow",
      "swing"
    );

    $("section").animate(
      {
        "padding-right": "0px"
      },
      "slow",
      "swing"
    );
  }

  $("#menu").on("click", function() {
    if ($("#menu").is(":checked")) {
      $(".animated:even").addClass("bounceInRight");
      $(".animated:odd").addClass("bounceInLeft");
      console.log("checked");
      $(".container").animate(
        {
          width: "100%"
        },
        "slow",
        "swing"
      );

      $("section").animate(
        {
          "padding-right": "30px"
        },
        "slow",
        "swing"
      );
    } else {
      if ($(".animated").hasClass("bounceInRight")) {
        $(".animated").removeClass("bounceInRight");
      }

      if ($(".animated").hasClass("bounceInLeft")) {
        $(".animated").removeClass("bounceInLeft");
      }
    }
  });

  $("#main-doc").on("click", function() {
    $("#menu").prop("checked", false);

    $(".container").animate(
      {
        width: "75%"
      },
      "slow",
      "swing"
    );

    $("section").animate(
      {
        "padding-right": "0px"
      },
      "slow",
      "swing"
    );
  });

  $("[href='#Introduction_to_PHP']").on("click", function() {
    $("#menu").prop("checked", false);

    $(".container").animate(
      {
        width: "75%"
      },
      "slow",
      "swing"
    );

    $("section").animate(
      {
        "padding-right": "0px"
      },
      "slow",
      "swing"
    );
  });

  $("[href='#Basics_things_about_PHP']").on("click", function() {
    $("#menu").prop("checked", false);

    $(".container").animate(
      {
        width: "75%"
      },
      "slow",
      "swing"
    );

    $("section").animate(
      {
        "padding-right": "0px"
      },
      "slow",
      "swing"
    );
  });

  $("[href='#Data_types']").on("click", function() {
    $("#menu").prop("checked", false);

    $(".container").animate(
      {
        width: "75%"
      },
      "slow",
      "swing"
    );

    $("section").animate(
      {
        "padding-right": "0px"
      },
      "slow",
      "swing"
    );
  });

  $("[href='#Variable_scope']").on("click", function() {
    $("#menu").prop("checked", false);

    $(".container").animate(
      {
        width: "75%"
      },
      "slow",
      "swing"
    );

    $("section").animate(
      {
        "padding-right": "0px"
      },
      "slow",
      "swing"
    );
  });

  $("[href='#Loops']").on("click", function() {
    $("#menu").prop("checked", false);

    $(".container").animate(
      {
        width: "75%"
      },
      "slow",
      "swing"
    );

    $("section").animate(
      {
        "padding-right": "0px"
      },
      "slow",
      "swing"
    );
  });

  $("[href='#Functions_in_PHP']").on("click", function() {
    $("#menu").prop("checked", false);

    $(".container").animate(
      {
        width: "75%"
      },
      "slow",
      "swing"
    );

    $("section").animate(
      {
        "padding-right": "0px"
      },
      "slow",
      "swing"
    );
  });

  $("[href='#Reference']").on("click", function() {
    $("#menu").prop("checked", false);

    $(".container").animate(
      {
        width: "75%"
      },
      "slow",
      "swing"
    );

    $("section").animate(
      {
        "padding-right": "0px"
      },
      "slow",
      "swing"
    );
  });
});

Answer 1

好吧，codepen 在整页时没有加载 bourbon-neat 出了点问题。所以我刚刚上传了编译好的scss代码。

我在 Codepen 上的一个项目不再工作了

One of my project on Codepen doesn’t work anymore

javascript

css

jquery

codepen