@luckyjenro0

Что делать если элемент не уаляет класс?

Вообщем, у меня при ховере на элемент появляется линия декоративная, делал с помощью ::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;
}


Вот класс если родительский элемент будет с классом 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;
}


Решил я сделать dropdown при клике на это все, чтобы давался класс active родительскому элементу li и показывало сам блок dropdown, сделал, вот 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"
            );
        })

Все работает отлично, как кликаю, так класс show добовляет блоку dropdown, а ссылке класс active, НОООО
Когда убирает класс у ссылки, ::after не пропадает до тех пор пока не кликнуть в любое место на странице, хотя пропадает класс active, подчеркивание снизу ::after остается, пока не кликнешь в любое место страницы, как решить?
  • Вопрос задан
  • 100 просмотров
Решения вопроса 1
@luckyjenro0 Автор вопроса
Уже решил))) :focus незаметил)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы