Laravel Vue Spa-自定义js脚本拒绝工作



我最近安装了一个新的Laravel Vue Spa项目,我想使用一个自定义主题CoolAdmin模板,而不是该项目附带的主题。

但是其中一个js脚本main.js拒绝工作、加载或启动。因此,汉堡菜单、下拉菜单和其他许多菜单都不起作用。我曾尝试使用Webpack.mix.js编译该文件,甚至将脚本导入app.js并进行编译,但仍然没有成功。

我不知道问题是否来自脚本本身,但它在没有laravel-vue项目的模板中运行得很好。这是脚本

(function ($) {
// USE STRICT
"use strict";
// Dropdown 
try {
var menu = $('.js-item-menu');
var sub_menu_is_showed = -1;
for (var i = 0; i < menu.length; i++) {
$(menu[i]).on('click', function (e) {
e.preventDefault();
$('.js-right-sidebar').removeClass("show-sidebar");        
if (jQuery.inArray(this, menu) == sub_menu_is_showed) {
$(this).toggleClass('show-dropdown');
sub_menu_is_showed = -1;
}
else {
for (var i = 0; i < menu.length; i++) {
$(menu[i]).removeClass("show-dropdown");
}
$(this).toggleClass('show-dropdown');
sub_menu_is_showed = jQuery.inArray(this, menu);
}
});
}
$(".js-item-menu, .js-dropdown").click(function (event) {
event.stopPropagation();
});
$("body,html").on("click", function () {
for (var i = 0; i < menu.length; i++) {
menu[i].classList.remove("show-dropdown");
}
sub_menu_is_showed = -1;
});
} catch (error) {
console.log(error);
}
var wW = $(window).width();
// Right Sidebar
var right_sidebar = $('.js-right-sidebar');
var sidebar_btn = $('.js-sidebar-btn');
sidebar_btn.on('click', function (e) {
e.preventDefault();
for (var i = 0; i < menu.length; i++) {
menu[i].classList.remove("show-dropdown");
}
sub_menu_is_showed = -1;
right_sidebar.toggleClass("show-sidebar");
});
$(".js-right-sidebar, .js-sidebar-btn").click(function (event) {
event.stopPropagation();
});
$("body,html").on("click", function () {
right_sidebar.removeClass("show-sidebar");
});

// Sublist Sidebar
try {
var arrow = $('.js-arrow');
arrow.each(function () {
var that = $(this);
that.on('click', function (e) {
e.preventDefault();
that.find(".arrow").toggleClass("up");
that.toggleClass("open");
that.parent().find('.js-sub-list').slideToggle("250");
});
});
} catch (error) {
console.log(error);
}

try {
// Hamburger Menu
$('.hamburger').on('click', function () {
$(this).toggleClass('is-active');
$('.navbar-mobile').slideToggle('500');
});
$('.navbar-mobile__list li.has-dropdown > a').on('click', function () {
var dropdown = $(this).siblings('ul.navbar-mobile__dropdown');
$(this).toggleClass('active');
$(dropdown).slideToggle('500');
return false;
});
} catch (error) {
console.log(error);
}
})(jQuery);
(function ($) {
// USE STRICT
"use strict";
// Load more
try {
var list_load = $('.js-list-load');
if (list_load[0]) {
list_load.each(function () {
var that = $(this);
that.find('.js-load-item').hide();
var load_btn = that.find('.js-load-btn');
load_btn.on('click', function (e) {
$(this).text("Loading...").delay(1500).queue(function (next) {
$(this).hide();
that.find(".js-load-item").fadeToggle("slow", 'swing');
});
e.preventDefault();
});
})
}
} catch (error) {
console.log(error);
}
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

请帮忙,有没有其他方法可以让这个脚本工作或启动

调试因此,经过一些调试,代码在for循环”use strict” doesn’t work之后停止加载请帮助

您应该知道Laravel正在使用Mix编译Js代码(基于Webpack(。因此,我建议您使用mix加载main.js文件,并在不使用CDN的情况下直接在bootstrap.js中导入Jquery。例如:
mix.scripts(['resources/js/main.js'], 'public/js')

此外,您必须在加载任何其他脚本之前加载Jquery。

最新更新