與窗口寬度的jQuery函數

我想要使用其他JavaScript/jQuery的幾個寬度。要輕鬆開始，當窗口寬度> 981時，我想要做20％，而當< 981時，要做到100％。這是我用其他腳本創建的腳本。與窗口寬度的jQuery函數

<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％。但是這個代碼不起作用。我希望有人知道。

（對不起這是荷蘭）

來源

2016-11-16 S. Brilleman

我想你需要了解[CSS Media Queries]（https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries） – mherzig

我明白你的意思@mherzig ，但事實並非如此。我知道CSS中的窗口大小，我已經在使用它了，但我認爲我不能在CSS中更改它。 –

我發現我的問題...

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

而且它的工作...感謝您的幫助！

來源

2016-11-22 16:47:27

這是對別人的結構，如果在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"; 
    } 
    }

來源

2016-11-16 20:17:37

對不起，但它沒有爲我工作。我甚至無法打開按鈕openNav（）。也許你知道另一個解決方案無論如何感謝您的幫助！ –

@ S.Brilleman你可以發佈你的HTML代碼嗎？請 –

@ S.Brilleman看看這個https://jsfiddle.net/z3nxvgy5/。 –

你的職能應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 */ 
}

來源

2016-11-16 20:22:31 driconmax

這是有點工作......但是當我寫'var openWidth =「100％」;'看起來它總是100％。編成20％，總是20％。所以它不適合我。也許你可以進一步幫助我。不管怎麼說，多謝拉！ @driconmax –

如果這是所有的代碼，然後有幾個，我可以看到的問題。

你有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"); 
}

我們現在基本上是設置一個狀態的頁面，說NAV打開或關閉。所以，現在的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設置如果NAV是開放的，使用CSS休息。更容易處理，而且您也不必設置處理程序來查看瀏覽器視口大小是否更改。

來源

2016-11-17 00:16:34 mherzig

我試過，我知道你的代碼是爲了什麼，但是當我嘗試時，再也沒有sidenav了。我複製了它，但它不工作;'（。我仍然感謝你的嘗試和幫助。http://s1100885.hbo-almere.nl –

與窗口寬度的jQuery函數

回答

相關問題