幻灯片菜单不会滑动

Question

我在css中创建了一个侧边菜单，想要使用tranform：translateX（）属性在页面上打开和关闭它。我正在使用复选框来打开和关闭菜单。所以我认为我可以使用javascript来实现它的功能，但它不起作用。你能通过javascript编辑转换属性吗？

这是代码......

window.onload = function () {
        var toggle_btn = document.getElementById('toggle_btn');
        var slide_menu = document.getElementById('slide_menu');

        var checked = function() {
            toggle_btn.checked = true;
        };

        if (checked === true) {
            slide_menu.style.transform = "translateX(0px)";
        } else {
            slide_menu.style.transform = "translateX(-200px)";
        }
    };

Answer 1

<强>尝试：

window.onload = function () {
    var toggle_btn = document.getElementById('toggle_btn'),
        slide_menu = document.getElementById('slide_menu');

    slide_menu.style.transform = toggle_btn.checked=== true ? "none" : "translateX(-200px)";

};

BTW - 您不需要javascript：http://jsfiddle.net/w5te8qqx/1/