我正在使用Materialize框架,并且在我的生活中无法弄清楚为什么scrolllspy插件不适合我。我的标记或css肯定不是问题 - 我确定它是对的。
控制台显示:
未捕获的TypeError:$(...)。scrollSpy不是函数
并引用我初始化插件的行:
$( document ).ready(function() {
$('.scrollspy').scrollSpy();
});
我的印象是插件“带有”materialize的JS,但即使我在我的标题中包含了scrollspy.js,我仍然会收到错误。
我错过了什么?
答案 0 :(得分:2)
我完全失明了 - @ A.Wolff是对的 - 我错误地加载了jQuery(不同版本)两次。
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=.9">
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
<meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
<link rel="stylesheet" href="{{site.baseurl}}/css/custom.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">
-->
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- google font -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800,600,400italic,800italic' rel='stylesheet' type='text/css'>
<!-- scrollspy -->
<script type="{{site.baseurl}}/js/scrollspy.js"></script>
<!-- jquery -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- custom js -->
<script src="{{site.baseurl}}/js/nav.js"></script>
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />
</head>