【发布时间】：2019-10-26 19:11:28
【问题描述】：
我正在构建一个从数据库加载内容的网站，因此网页上有动态元素。我使用 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 出现在它旁边。
【问题讨论】：
-
你试过调试这个吗？
-
您能告诉我们您使用哪个版本的 MS Edge 进行测试吗？您是否尝试验证 JQuery 代码是否被调用并运行？如果没有，请尝试使用 console.log 在控制台中打印消息以验证代码是否正在执行。如果可能的话，您可以尝试发布一个可能会产生 Edge 问题的示例，这可能有助于缩小问题范围。
-
另外，由于这是一个JS问题，请在没有PHP逻辑的情况下发布实际输出。
-
@VLAZ 我在 Edge 中使用了调试窗口，它有 0 个警告或错误，与 Chrome 和 Firefox 相同。
-
@Deepak-MSFT 我正在运行 Edge 42.17134.1.0，还有其他一些 jQuery 被调用并运行良好，特别是该代码块已打印到 Edge 中的控制台。
标签： javascript jquery google-chrome internet-explorer microsoft-edge