具有窗口寬度的jQuery函數

Question

我正在嘗試使用其他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()">&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>

因此，當窗口<981顯示100％時，> 981顯示20％。 但是此代碼無法正常工作。 我希望有人知道。

（對不起，是荷蘭人）

Answer 1

如果使用Javascript，這就是else的結構

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 。 但這帶來了另一個問題-如果width < 981 ，否則，如果width > 981 ，但是如果寬度恰好是981呢？ 最好只刪除($(window).width() > 981)並使其成為普通的else語句，而不是添加if 。
寬度檢查何時開始？ 除非您在resize事件上運行該代碼（並且不要這樣做！），否則它將運行一次。 因此，僅在頁面加載時設置打開的大小。 如果在此之后調整瀏覽器的大小，並超過981px的閾值，則不會獲得想要的結果。

那么，為什么要說使用媒體查詢呢？ 首先，讓我們看一下JS，並使打開/關閉函數非常通用：

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函數

問題描述

4 個解決方案

解決方案1
0 2016-11-16 20:17:37

解決方案2
0 2016-11-16 20:22:31

解決方案3
0 2016-11-17 00:16:34

解決方案4
0 已采納 2016-11-22 16:47:27

具有窗口寬度的jQuery函數

問題描述

4 個解決方案

解決方案1 0 2016-11-16 20:17:37

解決方案2 0 2016-11-16 20:22:31

解決方案3 0 2016-11-17 00:16:34

解決方案4 0 已采納 2016-11-22 16:47:27

解決方案1
0 2016-11-16 20:17:37

解決方案2
0 2016-11-16 20:22:31

解決方案3
0 2016-11-17 00:16:34

解決方案4
0 已采納 2016-11-22 16:47:27