當屏幕寬度大於特定寬度時如何恢復事件

Question

當屏幕尺寸小於 987px 時，我想在菜單圖標上添加一個事件，將 header 向右移動 150px，當我再次單擊時，它會將 header -150 推向左側。 問題是當屏幕寬度大於 789 時，header 已相應移動，這是我不想要的。 當屏幕寬度大於 789 時，如何將 header 自動恢復為實際的 position？

Answer 1

你可以做 css 的例子

@media only screen and (max-width:987px) {
.menu{
margin-left:150px;
}
}

Answer 2

如果我正確理解你的問題，你想要你的按鈕點擊的條件行為 - 點擊應該適用於寬度小於 789px 的分辨率（這個問題沒有具體說明，但我假設你的意思是寬度）。

為此，您可以在下面的代碼中執行類似的操作（可以在此處找到適當的小提琴 - 在其中，您可以試驗文檔的寬度，這是您在 SO 上無法執行的操作）。

 const nav = document.getElementsByTagName("nav")[0]; const btn = document.getElementById("clicker"); btn.addEventListener("click",moveHeader); function moveHeader() { let wd = window.innerWidth; console.log(wd); if(wd < 789) { nav.classList.toggle("moved"); } else { nav.classList.remove("moved"); } } window.addEventListener("resize", function() { if(this.innerWidth > 789) { nav.classList.remove("moved"); } });

 #controller { display: inline-block; width: 100px; position: relative; border-right: 2px solid black; } button { margin: 15px auto; } #content { display: inline-block; overflow: hidden; } #content div, nav { display: block; } nav { width: 100%; background-color: #ccc; } nav a { padding: 15px; } #content div { margin-top: 15px; margin-left: 15px; }.moved { margin-left: 150px; }

 <div id="controller"> <button id="clicker"> Click me </button> </div> <div id="content"> <nav> <a href="#">Home</a> <a href="#">Portfolio</a> <a href="#">Contact</a> </nav> <div> Lorem ipsum sit dolor amet etc </div> </div>

有幾點需要注意：

• class moved包含將 header / 導航向右移動 (150px) 的 CSS 規則。 還有其他方法可以實現此目的（ position: absolute等），但為了說明起見，我決定使用最簡單的方法。
• 如果你想讓 header 的 animation 來回相當順暢，你可以更改這些規則（或根據你的特定情況調整它們）：

nav {
  width: 100%;
  background-color: #ccc;
  transition: 0.5s; /* this part here */
}

...

.moved {
  margin-left: 150px;
  transition: 0.5s; /* this part here */
}

• 當且僅當 window 寬度小於 789px 時，相同的 class 在您的按鈕點擊（ moveHeader函數）上切換。 使用toggle的原因——你的用戶可能會一直點擊按鈕，它會一直發送 header / 導航，然后再拉回來。 因為我不知道你的頁面布局，這個解決方案會讓你打開和關閉導航，將它發送到屏幕外，然后把它帶回來等等
• window 有一個附加的事件偵聽器 - 您的用戶可能會更改瀏覽器的寬度，他們可能會在桌面上堆疊 windows，他們可能會旋轉他們的平板電腦和手機等，並且通過這樣做，他們可能會更改屏幕寬度。 如果發生這種情況，您需要能夠 go 恢復 < 789px 寬度的原始功能。 當然，這段代碼只涉及寬度變化。 要處理屏幕方向的潛在變化，請參閱此 SO 答案- 請務必檢查附帶的 canIUse 屏幕截圖。