javascript - 我在 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"
    );
  });
});

标签： javascriptjquerycsscodepen

Answer 1

好吧，codepen 在整页上没有加载波旁整洁有问题。所以我刚刚上传了编译好的scss代码。