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'); };

これにより、ウィンドウのサイズが変更されるたびにログが記録されますが、2 つに違いがある理由がわかりません。

また、要素が offcanvas-menu 要素にのみ存在する限り、幅が 768px を超える場合は要素を元の場所に戻す必要があります。

何か案は？

編集：

私は次のコードでこれを修正しました：

<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 に答える