Question

我有一个元素，当你点击它时，会显示一个使用CSS过渡向上滑动的内部元素。我这样做是通过改变CSS中内部元素的高度来实现的。父节点上的:active。之后我无法弄清楚如何解决这个问题。以下工作均不起作用：

/* NONE OF THESE WORK */
//Attempt 1
document.activeElement = null;

//Attempt 2
document.activeElement.blur();

//Attempt 3
document.body.focus();

//Attempt 4
document.body.click();

//Attempt 5
myElement.blur();

有没有办法让它不活跃？

Answer 1

您可以使用:active

删除CSS element.classList.remove("hasactive");伪类

var inner = document.getElementById("inner");

inner.addEventListener("transitionend", function(evt){
	this.parentNode.classList.remove("hasactive");
})

#outer:active #inner {
  height: 200px;
  
}
#inner { 
  background: red; 
  height: 0;
  transition: height 1s linear;
  -webkit-transition: height 1s linear;
}
#outer {
  height: 30px;
  background:blue;
}

<div id="outer">
  <div id="inner">
    
  </div>
</div>

如何在JavaScript中的元素上取消激活：活动状态？

1 个答案: