當屏幕寬度小於或大於時阻止運行javascript

Question

我有2個菜單，它們包含在同一頁面上，但位置不同。 當我的屏幕寬度> 555px並且父div設置為display：none時，出現一個。 另一個是display：none：555像素或更高時不顯示，小於555px時顯示。 它具有相同的菜單，但在移動/較小屏幕的頁面的不同部分中。

我在菜單上的某些下拉選項上使用了javascript，它適用於第一個菜單，但不適用於第二個菜單，我相信是因為js仍在嘗試為顯示運行：第二次嘗試都沒有（在小屏幕上） ）不起作用。

我可能使需要完成的工作過於復雜，但是我嘗試創建一些使用js的代碼來創建div，該div包含用於台式機和移動設備的菜單代碼，並在不應該的時候將其刪除...因此由js控制的媒體查詢版本，而不是由CSS控制，而不是隱藏div，而內容實際上會使該查詢不存在。

我是javascript的完全新手，並且剛剛嘗試適應我所看到的其他代碼，基本上我要做的就是當> 555px瀏覽器寬度添加時，當它在remove下移動時，我可以在頁面上使用相同的代碼添加/刪除div id =“ y” ...

function DynamicDiv() {
        var dynDiv = document.createElement("div");
        dynDiv.id = "search-holder1";
        dynDiv.innerHTML = "Created using JavaScript";
        document.body.appendChild(dynDiv);
    }

var elem = document.getElementById("search-holder1");

function myFunction(x) {
    if (x.matches) { // If media query matches

     DynamicDiv();

    } else {

        elem.parentNode.removeChild(elem);
    }
}

var x = window.matchMedia("(max-width: 555px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes

Answer 1

這是我的方式：

function chooseMenu() {
    var width = window.innerWidth;
    if (width > 555) {
        //Add your div
    else {
        //If div is in document then remove, and add mobile div
    }
}
window.onresize = chooseMenu;

您可能應該在使用匿名函數開始時也執行相同的功能。