Question

如果窗口宽度小于768px宽，我试图将元素移动到非画布菜单。

到目前为止，我有这个：

<script>
    window.onresize = move_sidebar(event);
    window.onload = move_sidebar(event);
    function move_sidebar(event) {
        if(window.outerWidth > 768) {
            return;
        } else {
            console.log('resized or loaded');
            document.getElementById('offcanvas-menu').appendChild(document.getElementById('sidebar-content'));
        }

    }
</script>

当窗口加载时工作正常，显示控制台日志并移动元素，但是，当我调整窗口大小时，事件不会触发。

除非我这样做：

window.onresize = function(event) { console.log('resizing'); };

然后每次调整窗口大小时都会记录，我无法弄清楚为什么两者之间存在差异。

如果宽度大于768px，我还需要将元素移回原来的位置，只要它只存在于offcanvas-menu元素中。

有什么想法吗？

修改

我最终使用以下代码修复此问题：

<script>
    window.onresize = move_sidebar;
    window.onload = move_sidebar;
    function move_sidebar(event) {
        ele = document.getElementById('sidebar-content');
        if(window.outerWidth > 768) {
            if(ele.parentNode.id == 'offcanvas-menu') {
                document.getElementById('sidebar').appendChild(document.getElementById('sidebar-content'));
            }
            return;
        } else {
            document.getElementById('offcanvas-menu').appendChild(ele);
        }

    }
</script>

Answer 1

您在执行后将move_sidebar函数的结果作为事件处理程序传递，而不是传递函数本身。

您的代码应为：

window.onresize = move_sidebar;
window.onload   = move_sidebar;

页面加载时它适用于你的原因仅仅是因为你错误地手动执行了你的功能。

调整大小和加载JavaScript，根据窗口宽度移动元素

1 个答案: