我正在尝试使用其他 JavaScript/jQuery 来获得多个宽度。为了轻松开始，我想在窗口宽度 > 981 时执行 20%，在 < 981 时执行 100%。这是我用其他脚本制作的脚本。
<script>
if ($(window).width() < 981){
function openNav() {
document.getElementById("mySidenav").style.width = "20%";
document.getElementById("main1").style.marginLeft = "20%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main1").style.marginLeft = "0";
}
}
else ($(window).width() > 981){
function openNav() {
document.getElementById("mySidenav").style.width = "100%";
document.getElementById("main1").style.display = "none";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main1").style.display = "block";
}
}
</script>
我的 HTML
<html>
<div id="mySidenav" class="sidenav">
<a id="closebtn" onclick="closeNav()">×</a>
<p> OVER MEZELF </p>
<a href="/about/about.html">ABOUT</a>
<p> PHP OPDRACHTEN </p>
<a href="/bmi/bmi1.html">BEREKEN BMI</a>
<a href="/array/array.html">ARRAY OPDRACHTEN</a>
<p style="display:none;"> DOWNLOAD </p>
<a href="download.zip" style="display:none;">DOWNLOAD ZIP BESTAND</a>
<div id="date" style="color:#818181;font-size:15px;cursor:context-menu;font-weight:bold;text-transform:uppercase;margin-top:100%;"> <?php $today = date("F j, Y"); echo $today; ?></div>
<div id="time" style="color:#818181;font-size:15px;cursor:context-menu;font-weight:bold;"></div>
</div>
<div id="main1">
<span id="menu0" style="color:white;font-size:30px;cursor:pointer;" onclick="openNav()">☰ </span>
</div>
</html>
所以当窗口 < 981 时显示 100%，当 > 981 时显示 20%。但是这段代码不起作用。我希望有人知道。
(抱歉是荷兰语)
最佳答案
这是 else if 在 Javascript 中的结构
if (time < 10) {
greeting = "Good morning";
} else if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
所以更正你的代码
if ($(window).width() < 981){
function openNav() {
document.getElementById("mySidenav").style.width = "20%";
document.getElementById("main1").style.marginLeft = "20%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main1").style.marginLeft = "0";
}
}
else if ($(window).width() > 981){
function openNav() {
document.getElementById("mySidenav").style.width = "100%";
document.getElementById("main1").style.marginLeft = "100%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main1").style.marginLeft = "0";
}
}
关于javascript - 具有窗口宽度的 jQuery 函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40641346/