物化标签在Laravel中不起作用

时间:2018-09-07 05:14:52

标签: javascript jquery laravel materialize

我一直在Laravel中从事一个项目,我将Materialize用作前端框架! 我的问题出在SendEmail文件和Materialize.js中,两者都无法正常工作,我添加了jQuery-3.3.1.min.js函数以确保代码甚至都不能正常工作……

这是我的console.log()文件

app.blade.php

这是我的标签代码

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'E-Commerce Test') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/materialize.js') }}" defer>
        console.log("I am 1");  
    </script>
    <script src="{{ asset('js/jquery-3.3.1.min.js') }}" defer>
        $(document).ready(function(){
        $('.tabs').tabs();
        console.log("I am 2");
  });
    </script>
    <script>
        console.log("I am 3");
    </script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet" type="text/css">

    <!-- Styles -->
    <style type="text/css">
        @font-face {
            font-family: Indie Flower, cursive;
            src: url('{{ public_path('/public/fonts/IndieFlower.ttf') }}');
        }
    </style>
    <link href="{{ asset('css/materialize.css') }}" rel="stylesheet">
    <link href="{{ asset('css/costume.css') }}" rel="stylesheet">



</head>
<body>
    @include('inc.navbar')
    <div id="app">

        <main class="py-4">
            @yield('content')
        </main>
    </div>
    @include('inc.footer')

    <script src="{{ asset('js/materialize.js') }}" defer>
        console.log("I am 1");  
    </script>
    <script src="{{ asset('js/jquery-3.3.1.min.js') }}" defer>
        $(document).ready(function(){
        $('.tabs').tabs();
        console.log("I am 2");
  });
      </script>

    <script>
        console.log("I am 4");
        document.addEventListener('DOMContentLoaded', function() {
            options ={};
            var elems = document.querySelectorAll('.dropdown-trigger');
            var instances = M.Dropdown.init(elems, options);
  });
    </script>

    <script>
        console.log("I am 5");
    </script>


</body>
</html>

在Google Chrome浏览器的控制台中,我收到了“我是3”,“我是4”和“我是5” 我试图在文件末尾替换脚本标签,但是没有用:( 我还使用了使用JS的Materialize Dropdown ,并且工作得很好...有想法的人吗?

在此先感谢大家

0 个答案:

没有答案