javascript - 在没有jQuery的HTML元素上切换类

我的网站上有一个部分，其中包含所有内容，但我希望在按下外部按钮时从左侧平稳地显示带有隐藏内容的“边栏”。

CSS过渡可以毫无问题地处理平滑度，并且jQuery toggle()可以在类之间切换，以将隐藏的div移入和移出屏幕。

不使用jQuery如何获得相同的效果？

最佳答案

您只能通过CSS3实现它:

<label for="showblock">Show Block</label>
<input type="checkbox" id="showblock" />

<div id="block">
    Hello World
</div>

和CSS部分:

#block {
    background: yellow;
    height: 0;
    overflow: hidden;
    transition: height 300ms linear;
}

label {
    cursor: pointer;
}

#showblock {
    display: none;
}

#showblock:checked + #block {
    height: 40px;
}

魔术是CSS中隐藏的checkbox和:checked选择器。

Working jsFiddle Demo。