我正在构建一个网站，该网站从数据库中加载内容，因此结果是网页上具有动态元素。我使用PHP foreach生成所需的jQuery，以允许导航栏根据内容移动和弹出。
我已经在IE 11，Chrome，Firefox和Edge中对其进行了测试，唯一有问题的是Edge。它给了我0个jQuery控制台错误，并且好像没有运行jQuery。但是，它肯定已加载。
我尝试更改脚本标签的位置，将所有功能包装在$（document）.ready中，并且其中的任何一个都没有运气。我还尝试过更改jQuery版本（我的原始版本是3.3.1），但这也没有任何作用。
$('#tri2').click(function() {
//Gets the window height
var height = $(window).height();
//Gets the footer height
var footerHeight = $(".footer").height();
//Subtracts the footer height from the height
height -= footerHeight;
//Gets width of the sidenav we wish to open
var sideNavWidth = $("#nav2").width();
//Checks the sidenav isn't already open, if it isn't it opens
if (sideNavWidth === 0) {
$("#nav2").toggle();
$("#nav2").css("minHeight", height + "px");
document.getElementById("nav2").style.width = "250px";
document.getElementById("nav2").style.marginLeft = "250px";
document.getElementById("main").style.marginLeft = "250px";
//Get width of the window
var width = $(window).width();
//Get width of the menu bar
var menuWidth = $(".menu-container").width();
//Subtracts the menu width from the window width
width -= menuWidth;
//Adds 15px to the width
width += 15;
//Subtracts the width of the sidenav from the window width
width -= 250;
//Sets the minwidth of the conetnt container to the width its allowed
$(".content-container").css("minWidth", width + "px");
//Sets the maxwidth of the conetnt container to the width its allowed
width -= 140;
$(".actual-content-container").css("maxWidth", width + "px");
var sideNavWidth = $("#case21").width();
if (sideNavWidth !== 0) {
$("#case21").fadeToggle();
document.getElementById("case21").style.width = "250px";
document.getElementById("case21").style.marginLeft = "150px";
document.getElementById("case21").style.marginLeft = "50px";
document.getElementById("case21").style.marginLeft = "0px";
document.getElementById("case21").style.width = "0px";
$("#overlay21").fadeOut("fast");
document.getElementById("overlay21").style.width = "0px";
}
var sideNavWidth = $("#case22").width();
if (sideNavWidth !== 0) {
$("#case22").fadeToggle();
document.getElementById("case22").style.width = "250px";
document.getElementById("case22").style.marginLeft = "150px";
document.getElementById("case22").style.marginLeft = "50px";
document.getElementById("case22").style.marginLeft = "0px";
document.getElementById("case22").style.width = "0px";
$("#overlay22").fadeOut("fast");
document.getElementById("overlay22").style.width = "0px";
}
var sideNavWidth = $("#case23").width();
if (sideNavWidth !== 0) {
$("#case23").fadeToggle();
document.getElementById("case23").style.width = "250px";
document.getElementById("case23").style.marginLeft = "150px";
document.getElementById("case23").style.marginLeft = "50px";
document.getElementById("case23").style.marginLeft = "0px";
document.getElementById("case23").style.width = "0px";
$("#overlay23").fadeOut("fast");
document.getElementById("overlay23").style.width = "0px";
}
var sideNavWidth = $("#case24").width();
if (sideNavWidth !== 0) {
$("#case24").fadeToggle();
document.getElementById("case24").style.width = "250px";
document.getElementById("case24").style.marginLeft = "150px";
document.getElementById("case24").style.marginLeft = "50px";
document.getElementById("case24").style.marginLeft = "0px";
document.getElementById("case24").style.width = "0px";
$("#overlay24").fadeOut("fast");
document.getElementById("overlay24").style.width = "0px";
}
var sideNavWidth = $("#case25").width();
if (sideNavWidth !== 0) {
$("#case25").fadeToggle();
document.getElementById("case25").style.width = "250px";
document.getElementById("case25").style.marginLeft = "150px";
document.getElementById("case25").style.marginLeft = "50px";
document.getElementById("case25").style.marginLeft = "0px";
document.getElementById("case25").style.width = "0px";
$("#overlay25").fadeOut("fast");
document.getElementById("overlay25").style.width = "0px";
}
var sideNavWidth = $("#case36").width();
if (sideNavWidth !== 0) {
$("#case36").fadeToggle();
document.getElementById("case36").style.width = "250px";
document.getElementById("case36").style.marginLeft = "150px";
document.getElementById("case36").style.marginLeft = "50px";
document.getElementById("case36").style.marginLeft = "0px";
document.getElementById("case36").style.width = "0px";
$("#overlay36").fadeOut("fast");
document.getElementById("overlay36").style.width = "0px";
}
var sideNavWidth = $("#case37").width();
if (sideNavWidth !== 0) {
$("#case37").fadeToggle();
document.getElementById("case37").style.width = "250px";
document.getElementById("case37").style.marginLeft = "150px";
document.getElementById("case37").style.marginLeft = "50px";
document.getElementById("case37").style.marginLeft = "0px";
document.getElementById("case37").style.width = "0px";
$("#overlay37").fadeOut("fast");
document.getElementById("overlay37").style.width = "0px";
}
var sideNavWidth = $("#case38").width();
if (sideNavWidth !== 0) {
$("#case38").fadeToggle();
document.getElementById("case38").style.width = "250px";
document.getElementById("case38").style.marginLeft = "150px";
document.getElementById("case38").style.marginLeft = "50px";
document.getElementById("case38").style.marginLeft = "0px";
document.getElementById("case38").style.width = "0px";
$("#overlay38").fadeOut("fast");
document.getElementById("overlay38").style.width = "0px";
}
var sideNavWidth = $("#case39").width();
if (sideNavWidth !== 0) {
$("#case39").fadeToggle();
document.getElementById("case39").style.width = "250px";
document.getElementById("case39").style.marginLeft = "150px";
document.getElementById("case39").style.marginLeft = "50px";
document.getElementById("case39").style.marginLeft = "0px";
document.getElementById("case39").style.width = "0px";
$("#overlay39").fadeOut("fast");
document.getElementById("overlay39").style.width = "0px";
}
var sideNavWidth = $("#case310").width();
if (sideNavWidth !== 0) {
$("#case310").fadeToggle();
document.getElementById("case310").style.width = "250px";
document.getElementById("case310").style.marginLeft = "150px";
document.getElementById("case310").style.marginLeft = "50px";
document.getElementById("case310").style.marginLeft = "0px";
document.getElementById("case310").style.width = "0px";
$("#overlay310").fadeOut("fast");
document.getElementById("overlay310").style.width = "0px";
}
var sideNavWidth = $("#case311").width();
if (sideNavWidth !== 0) {
$("#case311").fadeToggle();
document.getElementById("case311").style.width = "250px";
document.getElementById("case311").style.marginLeft = "150px";
document.getElementById("case311").style.marginLeft = "50px";
document.getElementById("case311").style.marginLeft = "0px";
document.getElementById("case311").style.width = "0px";
$("#overlay311").fadeOut("fast");
document.getElementById("overlay311").style.width = "0px";
}
var sideNavWidth = $("#case312").width();
if (sideNavWidth !== 0) {
$("#case312").fadeToggle();
document.getElementById("case312").style.width = "250px";
document.getElementById("case312").style.marginLeft = "150px";
document.getElementById("case312").style.marginLeft = "50px";
document.getElementById("case312").style.marginLeft = "0px";
document.getElementById("case312").style.width = "0px";
$("#overlay312").fadeOut("fast");
document.getElementById("overlay312").style.width = "0px";
}
var sideNavWidth = $("#case313").width();
if (sideNavWidth !== 0) {
$("#case313").fadeToggle();
document.getElementById("case313").style.width = "250px";
document.getElementById("case313").style.marginLeft = "150px";
document.getElementById("case313").style.marginLeft = "50px";
document.getElementById("case313").style.marginLeft = "0px";
document.getElementById("case313").style.width = "0px";
$("#overlay313").fadeOut("fast");
document.getElementById("overlay313").style.width = "0px";
}
var sideNavWidth = $("#case314").width();
if (sideNavWidth !== 0) {
$("#case314").fadeToggle();
document.getElementById("case314").style.width = "250px";
document.getElementById("case314").style.marginLeft = "150px";
document.getElementById("case314").style.marginLeft = "50px";
document.getElementById("case314").style.marginLeft = "0px";
document.getElementById("case314").style.width = "0px";
$("#overlay314").fadeOut("fast");
document.getElementById("overlay314").style.width = "0px";
/
}
}
setTimeout(
function() {
//Checks that if another sidenav is open
var sideNavWidth = $("#nav3").width();
//If it is hide it
if (sideNavWidth > 0) {
$("#nav3").fadeToggle();
document.getElementById("nav3").style.width = "250px";
document.getElementById("nav3").style.marginLeft = "150px";
document.getElementById("nav3").style.marginLeft = "50px";
document.getElementById("nav3").style.marginLeft = "0px";
document.getElementById("nav3").style.width = "0px";
}
//Checks that if another sidenav is open
var sideNavWidth = $("#nav7").width();
//If it is hide it
if (sideNavWidth > 0) {
$("#nav7").fadeToggle();
document.getElementById("nav7").style.width = "250px";
document.getElementById("nav7").style.marginLeft = "150px";
document.getElementById("nav7").style.marginLeft = "50px";
document.getElementById("nav7").style.marginLeft = "0px";
document.getElementById("nav7").style.width = "0px";
}
}, 400);
});
这应该算出屏幕大小，并且应该将sidenav推到右侧，并允许第二个sidenav出现在屏幕旁边。
答案 0 :(得分：0)
此问题已通过从jQuery 3.3.1降级到3.1.1来解决，