javascript - Javascript 函数在 Google 检查功能中触发，但并非如此
问题描述
//Overlay mobile menu open
$('#burger-icon').on('click', function(e) {
e.stopPropagation();
document.getElementById('fp-menu').style.height = "100%";
let overlay_content = document.getElementsByClassName("overlay-content")[0];
let pipe = overlay_content.querySelector(".pipe");
let contact = document.querySelector("#sidebar-leftButton");
let case_studies = document.querySelector("#sidebar-rightButton");
if (screen.width < 1000) {
let overlay_contentA = document.querySelectorAll(".overlay a");
for (i = 0; i < overlay_contentA.length; i++) {
overlay_contentA[i].style.color = "white";
}
//changes the social icons to white if in mobile view.
document.getElementById('instagram').src = "instagram_white.svg";
document.getElementById('linkedin').src = "linkedin_white.svg";
document.getElementById('twitter').src = "twitter_white.svg";
//gets rid of the pipe in menu that is visible for the desktop version
//removes sidetabs while in overlay menu
pipe.style.display = "none";
contact.style.display = "none";
case_studies.style.display = "none";
//changes how the elements are displayed when overlay is triggered
$('#fp-menu .news').removeClass("col-sm-2");
$('#fp-menu .portfolio').removeClass("col-sm-3");
$('#fp-menu #social').removeClass("col-sm-6");
}
});
function closeOverlayMenu() { //closes the overlay mobile menu
// e.stopPropagation();
$('#fp-menu').animateCss('slideUp');
$('#fp-menu').css('height', 0);
let overlay_content = document.getElementsByClassName("overlay-content")[0];
let pipe = overlay_content.querySelector(".pipe");
let contact = document.querySelector("#sidebar-leftButton");
let case_studies = document.querySelector("#sidebar-rightButton");
let overlay_contentA = document.querySelectorAll(".overlay a");
for (i = 0; i < overlay_contentA.length; i++) {
overlay_contentA[i].style.color = "black";
}
//changes icons to black on slide up of overlay
document.getElementById('instagram').src = "instagram.svg";
document.getElementById('linkedin').src = "linkedin.svg";
document.getElementById('twitter').src = "twitter.svg";
//restores elements of the original homepage that were hidden for overlay
pipe.style.display = "block";
contact.style.display = "block";
case_studies.style.display = "block";
$('#fp-menu .news').addClass("col-sm-2");
$('#fp-menu .portfolio').addClass("col-sm-3");
$('#fp-menu #social').addClass("col-sm-6");
};
document.getElementsByTagName('body')[0].onresize = function() {
closeOverlayMenu();
};
//overlay mobile menu close
$('#closebtn').on('click', function(e) {
e.stopPropagation();
$('#fp-menu').animateCss('slideUp');
$('#fp-menu').css('height', 0);
//if overlay mobile menu is down, close it by clicking the X
if (screen.width < 1000) {
closeOverlayMenu();
console.log(document.querySelectorAll("#social"));
}
});//overlay menu styling
.overlay {
height: 0;
width: 100%;
position: fixed;
z-index: 999;
top: 0;
left: 0;
background-color: #000000;
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 5%;
width: 100%;
text-align: center !important;
margin-top: 90px;
.row{
padding: 50px 30px 50px 30px;
.column{
float: left;
width: 33.33%;
padding: 0 5px 0 5px;
}
}
img {
width: 50px;
}
div {
padding: 30px 0 30px 0;
}
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #FFFFFF;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
#closebtn {
display:block;
position: relative;
top: 5px;
right: 20px;
font-size: 60px;
}
#social{
position: relative;
top: 10px;
a {
padding: 5% 5% 5% 5%;
}
}
#fp-menu{
display: block;
color: $menu_black;
}
.pipe{
display: block;
transition: 0.4s;
}<div id="fp-menu" class="overlay">
<div id="closebtn" style="color: white;">X</div>
<div class="column overlay-content">
<!-- <div class="column"> -->
<div class="col-sm-2 news">
<a href="https://news.co.uk/">NEWS</a>
</div>
<div class="col-sm-1 pipe">
|
</div>
<div class="col-sm-3 portfolio">
<a href="https://production.co.uk/">PORTFOLIO</a>
</div>
<div id="social" class="col-sm-6">
<a href="https://www.instagram.com"> <img id="instagram" src='instagram.svg' /></a>
<a href="https://www.linkedin.com"> <img id="linkedin" src='linkedin.svg' /></a>
<a href="https://twitter.com"> <img id="twitter" src='twitter.svg' /></a>
</div>
</div>
</div>所以最奇怪的是，我有 1 个函数在 2 个条件下触发：调整窗口大小和单击退出按钮时。
这与实际上是为移动用户设计的覆盖菜单有关。
在这两种情况下，当我在 chrome 中打开检查控制台时，这些功能都可以正常工作。但是，当我关闭它并返回到正常的浏览器窗口时，这些功能将停止执行。
在手机上还好。我只在台式机/笔记本电脑上遇到过这个问题（因为我在不同的台式机 [iMac] 和 2 台笔记本电脑 [Macbooks，但我认为硬件类型不重要]）。
目前，“#social” div 中的图标没有更改为白色，这是我期望在打开时发生的，而在关闭时，它们会返回黑色。他们在整个执行过程中保持黑色。
有没有人经历过这种情况？这与一个 Wordpress 平台站点有关。完全定制，没有主题。
如果此描述有帮助，请告诉我。如果需要任何代码，请告诉我。
ps：我以为是终端或服务器缓存问题，我都清除了缓存，但问题仍然存在。
function closeOverlayMenu(){//closes the overlay mobile menu
$('#fp-menu').animateCss('slideUp');
$('#fp-menu').css('height', 0);
let overlay_content = document.getElementsByClassName("overlay-content")[0];
let pipe = overlay_content.querySelector(".pipe");
let contact = document.querySelector("#sidebar-leftButton");
let case_studies = document.querySelector("#sidebar-rightButton");
let overlay_contentA = document.querySelectorAll(".overlay a");
for (i = 0; i < overlay_contentA.length; i++) {
overlay_contentA[i].style.color = "black";
}
//changes icons to black on slide up of overlay
document.getElementById('instagram').src="https://s3-eu-west-1.amazonaws.com/mvt-hosted-images/instagram.svg";
document.getElementById('linkedin').src="https://s3-eu-west-1.amazonaws.com/mvt-hosted-images/linkedin.svg";
document.getElementById('twitter').src="https://s3-eu-west-1.amazonaws.com/mvt-hosted-images/twitter.svg";
//restores elements of the original homepage that were hidden for overlay
pipe.style.display="block";
contact.style.display="block";
case_studies.style.display="block";
$('#fp-menu .news').addClass("col-sm-2");
$('#fp-menu .portfolio').addClass("col-sm-3");
$('#fp-menu #social').addClass("col-sm-6");
};
我希望该功能会在没有激活开发控制台的情况下触发。请让我知道是否有任何进一步的描述或信息会有所帮助。
解决方案
推荐阅读
- c# - IN Logout Link 如何将用户重定向到用户先前登录的同一区域
- python - 删除超出范围的偶数索引
- flutter - Flutter：使用不同的包名称（applicationId）构建变体（风味）
- ios - performSegue 创建两个视图控制器
- sql-server - SQL Report Builder Expressions - 如果数据值字段没有任何数据，我如何将报告上的值显示为“---”
- sql - 如何在sql中执行存储在表列中的条件
- react-native - 如何从 Windows 机器上的 expo 服务器连接到 WSL
- android - 存根时出现空指针异常
- ubuntu - 通过 python paramiko ssh session 执行 Wine 命令失败
- python - 在 Python 中复制每个第二个矩阵元素