Javascript 如何使用变换使菜单边栏消失并调整内容

现在我正在制作一个仪表板，左边是列表，右边是内容。下面是我的两个css的一个片段：

.sidebar {
    width: 220px;
    height: 100%;
    background-color: #171717;
    float: left;
    border-right: 1px #111 solid;
    position: absolute;
}

.content {
    width: 1480px;
    height: 100%;
/*    margin-left: 220px;*/
    background-color: #222;
    padding: 15px;
    -webkit-transform: translate3d(220px, 0px , 0px);
/*    transform: translate3d(220px, 0, 0);*/
}

下面是我的javascript：

$(document).ready(function(){
    $("#home").click(function(){
        $("#nav").slideToggle('fast'); 
        document.getElementsByClassName('sidebar').style.transform = "(0, 0, 0)"; 
        document.getElementsByClassName('content').style.transform = "(0, 0, 0)";  
        document.getElementsByClassName('content').style.webkitTransform = "(0, 0, 0)";  
        document.getElementsByClassName('content').style.MozTransform = "(0, 0, 0)";   
        document.getElementsByClassName('content').style.msTransform = "(0, 0, 0)";    
        document.getElementsByClassName('content').style.OTransform = "(0, 0, 0)";                  });


});

我正试图这样做，如果我点击内容和侧边栏上方的按钮，侧边栏的内容将消失，然后内容部分将伸展并调整到屏幕上。同样，如果我再次单击相同的按钮，侧边栏将返回，然后内容将调整为可见的侧边栏。现在，当我点击按钮时，侧边栏会向上滚动并消失，但内容部分非常顽固，只是没有从原来的位置移动

我发现了一件奇怪的事，如果我把：

    $("#nav").slideToggle('fast'); 

最后，在所有这些转换之后，侧边栏的滚动功能甚至不起作用。如果我点击按钮，侧边栏甚至没有反应，这让我相信我没有正确处理这些转换

编辑：注意#nav只是侧边栏中内容的一个id。我通常会使用.sidebar向上滚动，但每当我试图让它消失时，它都会很慢。使用#nav，两种方式都很好

请帮忙，

---

谢谢

我为您编写了一段代码。我想这会对您有所帮助。只需复制、粘贴并试用即可。jquery已联机。因此，您需要和internet连接来尝试该代码，或者如果您已将jquery脱机链接，则该代码将正常工作。祝您好运

欢迎
身体{
保证金：0；
填充：0；
}
梅因迪夫先生{
宽度：100%；
身高：100%；
}
.斯莱迪夫{
宽度：0%；
身高：100%；
背景颜色：橙色；
位置：绝对位置；
}
.内容{
宽度：100%；
身高：100%；
背景色：黑色；
位置：绝对位置；
右：0；
}
滑块
$（“#单击”）。单击（函数（）{
$（“div.slidediv”）.animate（{宽度：“30%”）；
$（“div.content”）.animate（{width:“70%”}）；
$（this.hide（）；
});
$（“div.slidediv”）。单击（函数（）{
$（this.animate（{width:“0%”}）；
$（“div.content”）.animate（{width:“100%”}）；
$（“#单击”）.show（）；
});

谢谢！我最终使用了动画功能并使其工作！嗯，至少是单向的，哈哈。我现在需要得到它，这样如果我再次点击按钮，它就会恢复。我将回顾一下您的，因为它似乎具有此功能始终将您的尺寸与

%

一起使用，因此当screez调整大小时，它会以同样的方式影响其他人。