1

如果窗口宽度小于 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>
4

1 回答 1

2

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

您的代码应该是：

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

当页面加载时它对您起作用的原因仅仅是因为您错误地手动执行了您的功能。

于 2014-06-10T12:41:50.433 回答