切换活动状态

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;
}

它前面应该有 adot而不是 acolon

演示版