在没有jQuery的HTML元素上切换类 [英] Toggle class on HTML element without jQuery

问题描述

我在我的网站上有一个包含所有内容的部分，但是我想要一个带有隐藏内容的边栏，通过外部按钮从左侧顺利显示。

CSS转换可以处理平滑没有问题，并且jQuery toggle（）可以在类之间切换，将隐藏的div移动和移出屏幕。 p>

如何在不使用jQuery的情况下获得相同的效果？

解决方案

可以仅通过CSS3实现它：

 < label for =showblock>显示块< / label& 
< input type =checkboxid =showblock/> 
 
< div id =block> 
 Hello World 
< / div> 
  

和CSS部分：

  #block {
 background：yellow; 
 height：0; 
 overflow：hidden; 
 transition：height 300ms linear; 
} 
 
标签{
 cursor：pointer; 
} 
 
 #showblock {
 display：none; 
} 
 
 #showblock：checked + #block {
 height：40px; 
} 
  

魔法 c>复选框和CSS中的：checked 选择器。

Workinging jsFiddle Demo 。

I have a section on my website which holds all the content, but I want a "sidebar" with hidden content to smoothly appear from the left at the push of an external button.

CSS transitions can handle the smoothness no problem, and jQuery toggle() can switch between classes to move the hidden div in and out of the screen.

How can I get the same effect without using jQuery?

解决方案

You can implement it only by CSS3:

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

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

And the CSS part:

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

label {
    cursor: pointer;
}

#showblock {
    display: none;
}

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

The magic is the hidden checkbox and the :checked selector in CSS.

Working jsFiddle Demo.

这篇关于在没有jQuery的HTML元素上切换类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！