如何在JavaScript中的元素上取消设置：active状态？

Question

I have an element which, when you click on it, shows an inner element sliding up using CSS transitions. I do this by changing the inner element's height in CSS' :active on the parent node. I cannot figure out how to unset this afterwards. None of the following work:

/* 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();

Is there a way to make it not active?

Answer 1

You can remove CSS :active pseudoclass using 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>