jQuery 宽度为 window 的函数

Question

我正在尝试将其他 JavaScript/jQuery 用于多个宽度。为了轻松开始，我想在 window 宽度 > 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()">&times;</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()">&#9776; </span>
</div>
</html>

所以当window<981时显示100%，>981时显示20%。但是这段代码不起作用。希望有人知道。

（抱歉是荷兰语）

Answer 1

这是else if in 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";
    }
    }

Answer 2

您的函数应该在 if/else 块之外声明，并使用 var 进行通信。你也忘记了else IF

<script>
    var openWidth = "100%";
    function openNav() {
        document.getElementById("mySidenav").style.width = openWidth;
        document.getElementById("main1").style.marginLeft = openWidth;
    }
    function closeNav() {
        document.getElementById("mySidenav").style.width = "0";
        document.getElementById("main1").style.marginLeft = "0";
    }
    if ($(window).width() < 981){
        openWidth = "20%";

    } else if ($(window).width() > 981){
        openWidth = "100%";
    }
</script>

CSS 也可以使用 @media

来完成

@media only screen and (max-width: 320px) {
    /* Here you can set the width of open */
}

Answer 3

如果这是所有代码，那么我可以看到几个问题。

您有 if 和 else，但最后一个必须是 else if。但这会带来另一个问题——if width < 981，else if width > 981，但如果宽度恰好是 981 怎么办？与添加 if.

($(window).width() > 981)

else

宽度什么时候检查运行？除非您运行在调整大小事件中使用该代码（并且不要那样做！），否则它将运行一次。因此，打开的大小将在页面加载时设置为 only。如果您在此之后调整浏览器大小，并超出 981px 阈值，您将不会获得想要的结果。

那么为什么我说使用媒体查询呢？首先，让我们看一下JS，把open/close函数做的很通用：

function openNav() {
    $("html").addClass("navopen");
}
function closeNav() {
    $("html").removeClass("navopen");
}

我们现在实际上是在为页面设置一个状态，表示导航是打开还是关闭。所以现在 CSS:

#mySidenav {
    width: 0;
}

#main1 {
    margin-left: 0;
}

html.navopen #mySidenav {
    width: 100%;
}

html.navopen #main1 {
    display: none;
}

@media (max-width: 981px) {
    html.navopen #mySidenav {
        width: 20%;
    }

    html.navopen #main1 {
        margin-left: 20%;
        display: block;
    }
}

现在，您只需在 JS 中使用一个简单的切换来设置导航是否打开，然后使用 CSS 即可。更容易处理，您也不必设置处理程序来查看浏览器视口大小是否发生变化。

Answer 4

我发现了我的问题...

<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 if ($(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>

加上这个：

<script src="https://code.jquery.com/jquery-1.10.2.js">
</script>

成功了...感谢您的帮助！

jQuery 宽度为 window 的函数

jQuery function with window width

javascript

css

jquery

width