What if the element does not remove the class?

Question

css

In general, when I hover over an element, a decorative line appears, I did it with ::after

.header>.container>.navbar>.navbar-wrapper>.wrapper-center>ul>li>a::after {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    content: "";
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    opacity: 0;
    background-color: #2196F3;
    margin-top: 5px;
    box-shadow: 0 0 10px #2196F3, 0 0 20em #2196F3;
}

.header>.container>.navbar>.navbar-wrapper>.wrapper-center>ul>li>a:hover:after,
.header>.container>.navbar>.navbar-wrapper>.wrapper-center>ul>li>a:focus:after {
    opacity: 1;
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    cursor: pointer;
}

.header>.container>.navbar>.navbar-wrapper>.wrapper-center>ul>li.active>a:after,
.header>.container>.navbar>.navbar-wrapper>.wrapper-center>ul>li.active>a:after:after {
    opacity: 1;
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    cursor: pointer;
}

Here is the class if the parent element will be with class active

.header>.container>.navbar>.navbar-wrapper>.wrapper-center>ul>li.active>a::after {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    content: "";
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    opacity: 1;
    background-color: #2196F3;
    margin-top: 5px;
    box-shadow: 0 0 10px #2196F3, 0 0 20em #2196F3;
}

I decided to make a dropdown when clicking on all this, so that the active class is given to the parent li element and shows the dropdown block itself, I did it, here is the js

.on("click", ".dd-trigger", function(e) {
            e.preventDefault();

            var that = $(this);

            var id = that.attr("data-target");

            var dd = $(".dd" + id);

            that.closest("li").toggleClass("active");

            var h = that.outerHeight();

            dd.css({ top: that.position().top + h + "px", right: 0 }).toggleClass(
                "show"
            );
        })

Everything works fine, as I click, so the show class adds the dropdown block, and the active class to the link, NOOOOO
When the class is removed from the link, ::after does not disappear until you click anywhere on the page, although the active class disappears, underlining from below ::after remains until you click anywhere on the page, how to decide?

Answer 1

Already decided))) :focus unnoticed)