切换活跃状态

Question

对很多人来说很简单，但我还在学习。我正试图在简单对象的活动和非活动状态之间切换。

我有一个方形div：

<div id = "square"></div>

使用以下css，onclick，使div扩展

#square
 {
 height: 50px;
 width: 60px;
 border: 1px solid red;
 transition: height 2s ease;
}

#square:active
{
 height: 100px;
}

以下javascript来设置点击事件：

var square = document.getElementById("square").addEventListener("click",    function()
{
this.classList.toggle("active");

}, false);

但点击时似乎没有任何事情发生。我在这里包括JS，因为我也是学习JS的新手，我正在尝试习惯简单的逻辑原理。

这是小提琴：https://jsfiddle.net/theodore_steiner/fsk6y50k/4/

任何帮助都会很精彩

Answer 1

您使用class selector的方式是错误的，

#square.active{
 height: 100px;
}

它应该以{{1​​}}而不是dot

开头

DEMO