我一直在尝试使用MateralizeCSS ;仅由 Google 设计和创建；作为 Bootstrap 的替代品作为测试并亲自查看差异。但是，Materalize 有一些奇怪的地方。 HTML Setup在他们的官方网站上说很简单，但是当我尝试调整窗口大小时并按汉堡包图标时没有任何反应。这意味着 JavaScript 没有正确加载，但它实际上包含在我的 HTML 文件中。首先，我尝试使用 CDN，但它不起作用。所以我决定下载文件并将它们链接到文件中，但它仍然无法正常工作。
我的 HTML:
<!DOCTYPE html>
<html lang="en-US" class="gr__materializecss_com">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Template</title>
<!-- Import Google Icon Font -->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="materialize/css/materialize.css">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css"> -->
</head>
<body>
<nav role="navigation" class="light-green">
<div class="nav-wrapper container">
<a href="#" class="brand-logo">Brand</a>
<ul class="right hide-on-med-and-down">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Sign Up</a></li>
<li><a href="#">Login</a></li>
</ul>
<ul class="side-nav" id="nav-mobile">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Sign Up</a></li>
<li><a href="#">Login</a></li>
</ul>
<a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
</div>
</nav>
<!-- Import jQuery before materialize.js -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script type="text/javascript" src="materialize/js/materialize.js"></script>
<!--<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
-->
</body>
</html>
我打开 Inspector 看到了 Starter Template导航栏的结构，它和我的一样。我无法弄清楚问题所在。因此，任何合乎逻辑的解释都是值得赞赏的。
最佳答案
您只需要初始化 jQuery 插件，sideNav 方法就可以工作。希望这对您有所帮助!
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Template</title>
<!-- Import Google Icon Font -->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
</head>
<body>
<nav role="navigation" class="light-green">
<div class="nav-wrapper container">
<a href="#" class="brand-logo">Brand</a>
<ul class="right hide-on-med-and-down">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Sign Up</a></li>
<li><a href="#">Login</a></li>
</ul>
<ul class="side-nav" id="nav-mobile">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Sign Up</a></li>
<li><a href="#">Login</a></li>
</ul>
<a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<script>
$(".button-collapse").sideNav();
</script>
</body>
</html>关于javascript - Materialise CSS 无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44509980/