Laravel Mix、Jquery、Materialize ''$(...).collapsible 不是函数"答案

【问题标题】：Laravel Mix, Jquery, Materialize ''$(...).collapsible is not a function"Laravel Mix、Jquery、Materialize ''$(...).collapsible 不是函数"
【发布时间】：2021-06-23 04:03:45
【问题描述】：

我正在使用 Materialize Css 开发一个新的 laravel mix 项目，并想导入 jquery。一切正常。一切都按照它应该的方式编译，我什至可以在 app.js 中找到该函数。但是当我想使用可折叠功能时，它会声明

jQuery.Deferred 异常：$(...).collapsible 不是函数 TypeError: $(...).collapsible 不是函数

我的代码是这样的

app.blade.php

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

<!-- Scripts -->
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>

<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet" />
</head>

手风琴.blade.php

<ul class="collapsible">
    <li class="active">
        <div class="collapsible-header"><i class="material-icons">bookmark_outline</i>Openstaande Werkbonnen</div>
        <div class="collapsible-body">
            <table class="striped responsive-table">
                <thead>
                    <tr>
                        <th>Naam</th>
                        <th>Start Datum</th>
                        <th>Eind Datum</th>
                        <th>Info</th>
                        <th>Acties</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Werkbon 1</td>
                        <td>29-02-2021</td>
                        <td>29-03-2021</td>
                        <td>Dit is belangrijke informatie</td>
                        <td>
                            <i class="material-icons">
                                <a href="#" class="indigo-text">public</a>
                                <a href="#" class="green-text">check_circle</a>
                                <a href="#" class="orange-text">create</a>
                                <a href="#" class="red-text">delete</a>
                            </i>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </li>
    <li>
        <div class="collapsible-header"><i class="material-icons-outlined">bookmark_added</i>Afgeronde Werkbonnen
        </div>
        <div class="collapsible-body">
            <table class="striped">
                <thead>
                    <tr>
                        <th>Naam</th>
                        <th>Start Datum</th>
                        <th>Eind Datum</th>
                        <th>Info</th>
                        <th>Acties</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Naam</td>
                        <td>Start Datum</td>
                        <td>Eind Datum</td>
                        <td>Informatie</td>
                        <td>
                            <i class="material-icons">w
                                <a class="blue-text">public</a>
                                <a class="red-text">delete</a>
                            </i>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </li>
</ul>

<script type="text/javascript">

$(document).ready(function () {
    $('.collapsible').collapsible();
});

bootstrap.js

window._ = require('material-icons');
window._ = require("materialize-css");
window.$ = window.jQuery = require('jquery');

https://i.stack.imgur.com/DA1W6.png

【问题讨论】：

标签： jquery laravel materialize

【解决方案1】：

不知何故，只需一些摆弄就可以解决这个小问题

Bootstrap.js

window.$ = window.jQuery = require('jquery');
window._ = require('material-icons');
window._ = require("materialize-css");

刚刚将 jquery 切换到顶部，它现在可以工作了！很奇怪……但没关系:)

【讨论】：