Я создаю веб-сайт, который загружает контент из базы данных, в результате чего на веб-странице появляются динамические элементы.Я использую 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 вправо иразрешить появлению второго сиденава рядом с ним.