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>

Answer 2

在html的head标签处添加此行代码

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

这将添加jQuery

Javascript没有在网站上加载

2 个答案: