使用livewire和turbolinks创建应用程序,但现在我在应用程序中遇到了侧边栏切换器的问题。它显示“无法读取未定义的属性切换”。最初下拉菜单不起作用,我进行了研究并修复了下拉菜单,但现在出现了新的错误。我在我的应用程序js文件中找到了这个脚本。当我访问第二个页面时,侧边栏无法工作,因为它是SPA应用程序,所以我认为可能无法正确读取js,因此在主页面中添加了点击功能,但仍然显示相同的错误。
<script>
document.addEventListener("turbolinks:load", function() {
$('.dropdown-toggle').dropdown();
$('.navbar-toggler').click(function(){
"use strict";
var t = document.querySelectorAll('[data-toggle="sidebar"]');
(t = Array.prototype.slice.call(t)).forEach((function (t) {
t.addEventListener("click", (function (t) {
var e = t.currentTarget.getAttribute("data-target") || "#default-drawer",
o = document.querySelector(e);
o && o.mdkDrawer.toggle()
}))
}));
var e = document.querySelectorAll(".mdk-drawer");
(e = Array.prototype.slice.call(e)).forEach((function (t) {
t.addEventListener("mdk-drawer-change", (function (t) {
if (t.target.mdkDrawer) {
document.querySelector("body").classList[t.target.mdkDrawer.opened ? "add" : "remove"]("has-drawer-opened");
var e = document.querySelector('[data-target="#' + t.target.id + '"]');
e && e.classList[t.target.mdkDrawer.opened ? "add" : "remove"]("active")
}
}))
})), $(".sidebar .collapse").on("show.bs.collapse", (function (t) {
t.stopPropagation(), $(this).parent().closest("ul").find(".open").find(".collapse").not(this).collapse("hide"), $(this).closest("li").addClass("open")
})), $(".sidebar .collapse").on("hidden.bs.collapse", (function (t) {
t.stopPropagation(), $(this).closest("li").removeClass("open")
}))
});
})
</script>
侧边栏切换按钮------------
<button class="navbar-toggler w-auto mr-16pt d-block rounded-0" type="button" data-toggle="sidebar" data-turbolinks-eval=false>
<span class="material-icons">short_text</span>
</button>
侧边栏 ------------
<!-- drawer -->
<div class="mdk-drawer js-mdk-drawer" id="default-drawer" data-turbolinks-eval=false>
<div class="mdk-drawer__content">
<div class="sidebar sidebar-dark-dodger-blue sidebar-left" data-perfect-scrollbar>
<div class="d-flex align-items-center navbar-height">
<form action="" class="search-form search-form--black mx-16pt pr-0 pl-16pt">
<input type="text" class="form-control pl-0" placeholder="Search">
<button class="btn" type="submit"><i class="material-icons">search</i></button>
</form>
</div>
<a href="fixed-index.html" class="sidebar-brand ">
<!-- <img class="sidebar-brand-icon" src="assets/images/illustration/student/128/white.svg" alt="Luma"> -->
<span class="avatar avatar-xl sidebar-brand-icon h-auto">
<span class="avatar-title rounded bg-primary"><img src="{{ asset('assets/images/illustration/student/128/white.svg') }}" class="img-fluid" alt="logo" /></span>
</span>
<span>Logic Edx</span>
</a>
<div class="sidebar-heading">Student</div>
<ul class="sidebar-menu">
<li class="sidebar-menu-item @if(Request::route()->getName() == 'home') active @endif ">
<a class="sidebar-menu-button" href="{{ route('home') }}">
<span class="material-icons sidebar-menu-icon sidebar-menu-icon--left">home</span>
<span class="sidebar-menu-text">Home</span>
</a>
</li>
<li class="sidebar-menu-item @if(\Request::route()->getName() == 'test-series.index')active @endif">
<a class="sidebar-menu-button" href="{{ route('test-series.index') }}">
<span class="material-icons sidebar-menu-icon sidebar-menu-icon--left">local_library</span>
<span class="sidebar-menu-text">Browse Test-Series</span>
</a>
</li>
<li class="sidebar-menu-item @if(\Request::route()->getName() == 'free.test-series.index')active @endif">
<a class="sidebar-menu-button" href="{{ route('free.test-series.index') }}">
<span class="material-icons sidebar-menu-icon sidebar-menu-icon--left">style</span>
<span class="sidebar-menu-text">Free Test-Series</span>
</a>
</li>
@if(auth()->check())
<li class="sidebar-menu-item">
<a class="sidebar-menu-button" href="fixed-student-my-courses.html">
<span class="material-icons sidebar-menu-icon sidebar-menu-icon--left">search</span>
<span class="sidebar-menu-text">My Test-Series</span>
</a>
</li>
<li class="sidebar-menu-item">
<a class="sidebar-menu-button" href="fixed-student-quiz-result-details.html">
<span class="material-icons sidebar-menu-icon sidebar-menu-icon--left">live_help</span>
<span class="sidebar-menu-text">Result</span>
</a>
</li>
@endif
</ul>
</div>
</div>
</div>