Javascript 未在网站中加载

Question

我的网站上有一个按钮，单击该按钮会弹出菜单。我已经正确包含了 JS 文件，但它似乎不起作用。JS 文件或 HTML 是否有错误。文件如下。

mainfile.js

  var $blob = $('<blob/>');
  var $blob2 = $('<blob class="blob2"/>');


  $('#sidebarToggle').on('click', function() {
    $(this).closest('.menu').toggleClass('open');
    $('.page').toggleClass('open');

  });



  $('.link').on('mouseleave touchend', function(e) {
    //e.preventDefault();
    $blob.css({
      top: e.offsetY + 'px',
      left: e.offsetX + 'px'
    });
    $blob.removeClass('scale');
  });
  $('.link').on('mousemove touchmove', function(e) {
    e.preventDefault();
    $(this).find('blob').css({
      top: e.offsetY + 'px',
      left: e.offsetX + 'px'
    });
  });
  $('.sidebar').on('mousemove touchmove', function(e) {
    e.preventDefault();
  });
  $('.link').on('mouseenter touchstart', function(e) {
    $blob.css({
      top: e.offsetY + 'px',
      left: e.offsetX + 'px'
    });
    $(this).append($blob);
    setTimeout(function() {
      $blob.addClass('scale');
    }, 20);
  });
  $('.link').on('click', function(e) {
    e.preventDefault();
    $blob2.css({
      top: e.offsetY + 'px',
      left: e.offsetX + 'px'
    });
    $blob2.removeClass('scale');
    $(this).append($blob2);
    setTimeout(function() {
      $blob2.addClass('scale');
    }, 20);
    var target = $(this).attr('href');
    var scroll = $(target)[0].offsetTop - 70;
    $('html, body').animate({
      scrollTop: scroll
    });

  });

HTML 按钮元素:

<script src="js/mainfile.js"></script>
<div class="sidebar">
  <div class="menu">
    <div id="sidebarToggle" class="button"><span></span><span></span></div>
    <ul class="morpher">
      <li class="item"><a href="#" class="link"><span>Resume</span></a></li>
      <li class="item"><a href="#about_me" class="link"><span>About Me</span></a></li>
      <li class="item"><a href="#my_experience" class="link"><span>my experience</span></a></li>
      <li class="item"><a href="#my_projects" class="link"><span>my projects</span></a></li>
      <li class="item"><a href="#social" class="link"><span>social</span></a></li>
      <li class="item"><a href="#contact" class="link"><span>contact</span></a></li>
    </ul>
  </div>
</div>

Answer 1

如果要使用 CDN，您应该始终使用后备方法，以防 CDN 不可用于库。这意味着下载 jQuery 的副本并将其存储在本地。您可以使用此代码 -

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
    document.write(unescape("%3Cscript src='path/to/jquery-1.11.1.min.js'
 type='text/javascript'%3E%3C/script%3E"));
}
</script>