Question

我一直在尝试使用MateralizeCSS;仅由Google设计和创建;作为Bootstrap作为测试的替代方案，并自己查看差异。然而，Materalize有些奇怪之处。在他们的官方网站上陈述的HTML Setup很简单，但当我尝试调整窗口大小并按下汉堡包图标时没有任何反应。这意味着JavaScript未正确加载，但它实际上包含在我的HTML文件中。首先，我尝试使用CDN，但它无法正常工作。所以我决定下载文件并将它们链接到文件中，但它仍无效。

我的HTML：

$(".forminput").each(function() {
  $(this).on("click change paste", function() {
    var otherAmount = $(this).val();
    var currentBalance = $(this).parent('td').prev('td.balance').html();
    if (otherAmount > currentBalance) {
      alert('You are over the balance amount!');
    }
  });
});

我打开了Inspector以查看导航栏的Starter Template结构，它与我的相同。我无法弄清楚问题所在。所以任何合乎逻辑的解释都是值得赞赏的。

Answer 1

您只需要初始化sideNav方法的jQuery插件即可。希望这有帮助！

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

MateralizeCSS无法正常工作

1 个答案: