Javascript未加载到网站中

Question

I have a button in my website which on clicking pops up the menu. I have included the JS file properly, but it doesn't seem to work . Is there an error with the JS file or HTML. Files are as follows .

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 Button Element:

<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

You should always use a fall-back method if you're going to use a CDN, in case the CDN is not available for the library. That means downloading a copy of jQuery and storing it locally. The you can use this code -

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

Answer 2

At head tag of html add this line of code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

this will add jQuery