javascript - jQuery 文件不工作

标签 javascript jquery html

我正在尝试构建一个 Accordion ,但由于某种原因我的 jQuery 文件没有被获取。如果有人可以帮助我,我将非常感激。这就是我的

HTML

$(document).ready(function() {
  $('.list').on('click', '.list-control', function(e) {
    e.preventDefault();
    $(this).next('list-content').not(':animated').slideToggle();
  });
});
<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <title> Clever Oscar </title>
  <link rel="stylesheet" src="main.css">
</head>
<!--start of body-->

<body>
  <h1>Clever Oscar</h1>
  <ul class="list">
    <li>
      <button class="list-control">
					Phase one
				</button>
      <div class="list-content">
        Panal Context
      </div>
    </li>
  </ul>


  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script src="script.js"></script>
</body>

</html>

最佳答案

jquery.slim.js中动画效果如下:

jQuery.easing, jQuery.Animation, jQuery.speed

已被删除,因此请使用普通的 jquery。而且你还错过了.的类(class)。

$(document).ready(function() {
  $('.list').on('click', '.list-control', function(e) {
    e.preventDefault();
    $(this).next('.list-content').not(':animated').slideToggle();
  });
});
<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <title> Clever Oscar </title>
  <link rel="stylesheet" src="main.css">
</head>
<!--start of body-->

<body>
  <h1>Clever Oscar</h1>
  <ul class="list">
    <li>
      <button class="list-control">
					Phase one
				</button>
      <div class="list-content">
        Panal Context
      </div>
    </li>
  </ul>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script src="script.js"></script>
</body>

</html>

另请参阅这个古老的问题。 What are the differences between normal and slim package of jquery?

关于javascript - jQuery 文件不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51034698/

相关文章:

php - 如何在 PHP 中使用 while 循环创建 DIV 框?

javascript - 为什么我们不能在 AngularJS 中使用 JS 标准方法

javascript - 类型 'Observable<Response> ' 不可分配给类型 'Observable<HttpResponse<Blob>>'

Jquery 在单击时检查复选框不会检查它

php - 单击时播放特定音轨

javascript - 使用更少的代码来隐藏和显示选择菜单内容的更好方法是什么? javascript

javascript - 在javascript中将带引号的var从父级传递给子级

java - Facebook 如何在 "Facebook Connect"设置中使用 FB Init 调用设置 Cookie?

javascript - 如何 jQuery 在不同的按钮点击时切换多个图像?

javascript - 在完成 javascript css 后重复动画