我正在为主页导航。我用 HTML (PHP)、CSS 编写了它，现在正尝试使用 javascript (jquery) 使其功能化。
我试图实现的大部分工作都很好，但是 matchMedia() 方法与 addEventListener("change") 结合使用时没有按预期工作。在初始页面加载时，页面在大型和小型媒体查询中都按预期工作。当页面调整为其他查询时，功能似乎中断，即使 matchMedia() 似乎正在工作。如果将页面大小调整回初始查询，导航仍然会中断。
但是，如果页面再次调整为另一个查询，然后再次返回（所以从小到大再变回两倍，或者从大到小再变回两倍），则功能返回。刷新也会做同样的事情。
我试图找出我的错误，但无法以某种方式解决这个问题。你可以在这支笔上试试
$(function () {
const mediaQuery = window.matchMedia("(max-width: 1031px)");
function navFunktion() {
if (mediaQuery.matches) {
$(".mobileNav").click(function () {
$(this).siblings().toggleClass("topMenu");
$(this).siblings().find("ul").addClass("subMenu");
$(this).siblings().find("a").removeClass("red");
if ($(this).hasClass("red")) {
$(this).removeClass("red");
} else {
$(this).addClass("red");
}
console.log(
"case 1, open or close menu, close submenus, remove class .red from all links in navigation, add or remove class .red from this"
); //
});
$(".topMenu>li>a,.topMenu>li>ul>li>a").click(function (e) {
if ($(this).hasClass("directLink")) {
console.log("case 2, click on internal link, move to selected page");
} else if ($(this).hasClass("red")) {
$(this).removeClass("red");
$(this).parent().find("ul").addClass("subMenu");
$(this).parent().find("a").removeClass("red");
e.preventDefault();
console.log(
"case 3, remove class .red, close submenus, remove class .red from submenus, prevent default"
);
} else {
$(this).addClass("red");
$(this).parent().children("ul").removeClass("subMenu");
$(this).parent().siblings().find("ul").addClass("subMenu");
$(this).parent().siblings().find("a").removeClass("red");
e.preventDefault();
console.log(
"case 4, add class .red, open submenu, close siblings submenus, remove class .red from siblings, prevent default"
);
}
});
$(".topMenu ul ul li a").click(function () {
$("nav > ul").addClass("topMenu");
$(".mobileNav").removeClass("red");
console.log(
"case 5, click on external link, open new tab with external link, close menu, remove class .red from menu"
);
});
$(".content").css("background-color", "green"); // just to see if matchMedia is working
} else {
$(".topMenu>li>a,.topMenu>li>ul>li>a").click(function (e) {
if ($(this).hasClass("directLink")) {
console.log(
"case 6, page over 1031px, click on internal link, move to selected page"
);
} else {
e.preventDefault();
console.log(
"case 7, page over 1031px, click on navigation, prevent default"
);
}
});
$(".topMenu a").hover(function () {
$(this).toggleClass("red");
$(this).parent().parent().siblings("a").toggleClass("red");
$(this)
.parent()
.parent()
.parent()
.parent()
.siblings("a")
.toggleClass("red");
});
$(".topMenu ul ul li a").click(function () {
console.log(
"case 8, page over 1031px, click on external link, open new tab with external link"
);
});
$(".content").css("background-color", "blue"); // just to see if matchMedia is working
}
}
function exit() {
$(".logo, .slideshow-container, .content, .info-section").click(
function () {
$("nav > ul").addClass("topMenu");
$("nav ul ul").addClass("subMenu");
$(".mobileNav").removeClass("red");
console.log("case 9, click next to the navigation");
}
);
}
navFunktion();
mediaQuery.addEventListener("change", navFunktion);
exit();
});*{padding:0;margin:0;box-sizing:border-box}body{font-family:Verdana,Arial,Helvetica,sans-serif;font-size:16px;background-color:#333}.wrapper{max-width:1200px;min-width:300px;height:auto;margin:0 auto}.logo{float:left;width:100%;min-height:50px;padding:10px 0 10px 0;background-color:#ff0;border-radius:10px;border-bottom:#000 solid 1px}.logo img{width:90%;margin:10px 5%}.mobileNav{display:none}.subMenu{display:none}.red{background-color:#ff0000!important;color:#ffffff!important}nav a{font-size:18px;display:block;text-align:center;background-color:#ff0;border-radius:10px;border-bottom:1px #333 solid;border-right:1px #333 solid}nav ul{list-style-type:none}nav ul li{position:relative}nav ul ul{position:absolute}nav>ul>li>ul>li>a{background-color:#6d7174}nav>ul>li>ul>li>ul>li>a{background-color:#c9c9c9}nav ul ul li a,nav ul ul ul li a{border-radius:0;padding:0 20px;min-width:160px;white-space:nowrap}nav ul ul li:first-of-type>a,nav ul ul ul li:first-of-type a{border-top-right-radius:10px;border-top-left-radius:10px}nav ul ul li:last-of-type>a,nav ul ul ul li:last-of-type a{border-bottom-right-radius:10px;border-bottom-left-radius:10px}.slideshow-container{display:none;width:100%;max-height:180px;overflow:hidden;border-radius:10px}.dot{height:10px;width:10px;margin:0 2px;background-color:#bbb;border-radius:50%;display:inline-block;transition:background-color 0.6s ease;position:relative;top:-30px}.active{background-color:#717171}.fade{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s}@-webkit-keyframes fade{from{opacity:.4}to{opacity:1}}@keyframes fade{from{opacity:.4}to{opacity:1}}.content{position:relative;max-width:100%;background-color:#fff;border-top-left-radius:10px;border-top-right-radius:10px}.info-section{position:relative;max-width:100%;text-align:center;background-color:#ff0;border-bottom-left-radius:10px;border-bottom-right-radius:10px}.maps,.meteo{margin:0 auto;display:block}.maps iframe,.meteo iframe{width:80%}.clear{clear:both}.titel1{font-size:1.5em;text-align:center}.img1{width:200px;height:300px}.container1{width:50%;float:left;text-align:center}.container2{width:33%;float:left;text-align:center}.containerWrapper{width:100%}.row{display:flex;flex-wrap:wrap}.videoWrapper{position:relative;left:10%;width:80%;padding-bottom:45%;padding-top:25px;height:0}.videoWrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%}.imageWrapper{text-align:center}.imageWrapper img{width:80%}.imageWrapper a:hover img{border:2px solid red}.grid1 img{height:450px}.grid2 img{width:600px}.content .socialMediaKontakt{margin-left:20px}.socialMediaKontakt img{width:25px;vertical-align:middle}.kontakt,.oeffnungszeiten{width:255px;margin:0 auto}p{font-size:1em}h1{font-size:1.5em}h2{font-size:1.4em}h3{font-size:1.3em}h4{font-size:1.1em}a:link{text-decoration:none;color:blue}a:hover{text-decoration:none;color:red}li a:link{color:#000}li a:visited{color:#000}p,td,tr,th{padding:5px 20px 5px 20px}h1,h2,h3,h4,h5,h6{padding:10px 20px 10px 20px}@media only screen and (min-width:1031px){nav ul li:hover>ul{display:block;position:absolute;z-index:3}nav ul li{width:10%;float:left;line-height:50px;position:relative}nav ul ul li{width:auto;float:none}nav ul ul ul{top:0;left:100%}.column{width:45%;margin:0 auto}.column.left img{padding:20px 0 20px 20px}.column.right img{padding:20px 20px 20px 0}}@media only screen and (max-device-width:1030px),(max-width:1030px){body{min-width:320px}.wrapper{margin:5px}.mobileNav{position:relative;display:block;background-color:#ff0;width:100%;height:50px;border-radius:10px;border-bottom:1px solid #333}.hamburger{position:absolute;top:50%;left:50%;-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.topMenu{display:none}nav ul{line-height:50px;min-width:50%;position:absolute;z-index:1}nav ul li a,nav ul ul li a,nav ul ul ul li a{border-radius:0}nav>ul>li:first-of-type>a{border-top-right-radius:10px;border-top-left-radius:10px}nav>ul>li:last-of-type>a{border-bottom-right-radius:10px;border-bottom-left-radius:10px}nav ul ul{position:static}.container1,.container2{width:100%}.column{width:80%;margin:0 auto}.column.left img{padding:20px 0}.column.right img{padding:20px 0}}<!DOCTYPE html>
<html lang="de-ch">
<head>
<title>matchMedia problem</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="robots" content="index, follow">
<meta name="revisit-after" content="7 days">
<link rel="canonical" href="#">
<link href="css/styleFile.css" rel="stylesheet" type="text/css">
<link rel="icon" type="image/vnd.microsoft.icon" href="pics/homepage/favicon.ico">
<!-- Include jQuery Library -->
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<!-- Include local jQuery File with own styles -->
<script src="js/jquery.js" type="text/javascript"></script>
<style>
@media only screen and (min-width: 1031px) {
.full-content {
float: left;
position: relative;
width: 100%;
min-height: 1600px;
}
.content {
width: 70%;
min-height: 1600px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 0px;
}
.info-section {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
width: 30%;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 0px;
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="logo">
<picture>
<source srcset="https://upload.wikimedia.org/wikipedia/commons/3/3e/W3Schools_logo.png" type="image/webp">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3e/W3Schools_logo.png" alt="Logo">
</picture>
</div>
<div class="clear"></div>
<div class="nav">
<nav>
<div class="mobileNav"><img class="hamburger" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/300px-Hamburger_icon.svg.png" style="width: 40px;" alt="Menu"></div>
<ul class="topMenu">
<li>
<a href="index.php" class="directLink">Home</a>
</li>
<li>
<a href="#">Item 1</a>
<ul class="subMenu">
<li>
<a href="#">Submenu 1, Item 1</a>
<ul class="subMenu">
<li><a href="#" target="_blank">Submenu 2, Item 1</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 2</a></li>
</ul>
</li>
<li>
<a href="#">Submenu 1, Item 2</a>
<ul class="subMenu">
<li><a href="#" target="_blank">Submenu 2, Item 1</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 2</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 3</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 4</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 5</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 6</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 7</a></li>
</ul>
</li>
<li>
<a href="#">Submenu 1, Item 3</a>
<ul class="subMenu">
<li><a href="#" target="_blank">Submenu 2, Item 1</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 2</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 3</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 4</a></li>
</ul>
</li>
<li>
<a href="#">Submenu 1, Item 4</a>
<ul class="subMenu">
<li><a href="#" target="_blank">Submenu 2, Item 1</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 2</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 3</a></li>
</ul>
</li>
<li>
<a href="#">Submenu 1, Item 5</a>
<ul class="subMenu">
<li><a href="#" target="_blank">Submenu 2, Item 1</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 2</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 3</a></li>
</ul>
</li>
<li>
<a href="#">Submenu 1, Item 6</a>
<ul class="subMenu">
<li><a href="#">Submenu 2, Item 1</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Item 2</a>
<ul class="subMenu">
<li>
<a href="#">Submenu 1, Item 1</a>
<ul class="subMenu">
<li><a href="#" target="_blank">Submenu 2, Item 1</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 2</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 3</a></li>
</ul>
</li>
<li>
<a href="#">Submenu 1, Item 2</a>
<ul class="subMenu">
<li><a href="#" target="_blank">Submenu 2, Item 1</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 2</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 3</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 4</a></li>
</ul>
</li>
<li>
<a href="#">Submenu 1, Item 3</a>
<ul class="subMenu">
<li><a href="#">Submenu 2, Item 1</a></li>
<li><a href="#">Submenu 2, Item 2</a></li>
</ul>
</li>
<li>
<a href="#">Submenu 1, Item 4</a>
<ul class="subMenu">
<li><a href="#" target="_blank">Submenu 2, Item 1</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" class="directLink">Item 3</a>
</li>
<li>
<a href="#">Item 4</a>
<ul class="subMenu">
<li>
<a href="#">Submenu 1, Item 1</a>
<ul class="subMenu">
<li><a href="#" target="_blank">Submenu 2, Item 1</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 2</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 3</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 4</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 5</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 6</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 7</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 8</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 9</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 10</a></li>
</ul>
</li>
<li>
<a href="#">Submenu 1, Item 2</a>
<ul class="subMenu">
<li><a href="#" target="_blank">Submenu 2, Item 1</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 2</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Item 5</a>
<ul class="subMenu">
<li>
<a href="#">Submenu 1, Item 1</a>
<ul class="subMenu">
<li><a href="#" target="_blank">Submenu 2, Item 1</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 2</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 3</a></li>
</ul>
</li>
<li>
<a href="#">Submenu 1, Item 2</a>
<ul class="subMenu">
<li><a href="#" target="_blank">Submenu 2, Item 1</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 2</a></li>
<li><a href="#" target="_blank">Submenu 2, Item 3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Item 6</a>
<ul class="subMenu">
<li><a href="#" class="directLink">Submenu 1, Item 1</a></li>
</ul>
</li>
<li>
<a href="#">Item 7</a>
<ul class="subMenu">
<li><a href="#" class="directLink">Submenu 1, Item 1</a></li>
</ul>
</li>
<li>
<a href="#">Item 8</a>
<ul class="subMenu">
<li><a href="#" class="directLink">Submenu 1, Item 1</a></li>
<li><a href="#" class="directLink">Submenu 1, Item 2</a></li>
<li><a href="#" class="directLink">Submenu 1, Item 3</a></li>
<li><a href="#" class="directLink">Submenu 1, Item 4</a></li>
<li><a href="#" class="directLink">Submenu 1, Item 5</a></li>
</ul>
</li>
<li>
<a href="#" class="directLink">Item 9</a>
</li>
</ul>
<noscript style="display:block; line-height:50px; border-radius:10px; text-align:center; font-size:18px; font-weight:bold; color:red; background-color:white;">Please activate JavaScript! Otherwise our menu may not work properly!</noscript>
</nav>
</div>
<div class="clear"></div>
<div class="full-content">
<div class="content">
<br>
<h1>Content Section</h1>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div class="info-section">
<br>
<h1>Info Section</h1>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
</div>
</body>
</html>我为每个可能的情况添加了 console.log() 并在 matchMedia() 方法中应用了绿色或蓝色背景色以便能够解决这个问题，但我仍然迷路了。我将衷心感谢您的帮助。
非常感谢