当屏幕宽度小于或大于时阻止运行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;

您可能应该在使用匿名函数开始时也执行相同的功能。