Question

我有2个菜单包含在同一页面上，但位于不同的位置。当我有屏幕宽度＆gt;时出现一个在此大小下，555px和父div设置为display：none。另一个是显示：555px或以上时无，当小于555px时显示。它的菜单相同，但有一个菜单位于页面的不同部分，适用于移动/较小的屏幕。

我在菜单上的某些下拉选项上有javascript，它适用于第一个菜单，但不适用于第二个菜单，我相信因为js仍在尝试运行显示：所以在第二次尝试时没有（在小屏幕）它不起作用。

我可能过度复杂化了需要做的事情，但我试图创建一些代码，使用js创建包含桌面和移动菜单代码的div，并在不应该的时候删除它们。所以由js而不是css控制的媒体查询版本，而不是隐藏div和内容实际上会使它不存在。

我是javascript的完全新手并且刚刚尝试调整我见过的其他代码，基本上我想要做的是当＆gt; 555px浏览器宽度添加时以及当它移动时删除然后我可以使用相同的编码页面以添加/删除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;

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

当屏幕宽度小于或大于时，防止javascript运行

1 个答案: