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

Question

[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 остается, пока не кликнешь в любое место страницы, как решить?

Comments

[Ankhena]

.header>.container>.navbar>.navbar-wrapper>.wrapper-center>ul>li.active>a:after:after

я б уволила

[Demian Smith]

Ankhena, да, это, скорее всего, прийдётся часто чинить.

[Ankhena]

Demian Smith, вот чтобы не пришлось что-то чинить часто, проще уволить один раз и побыстрее.

[Demian Smith]

Ankhena, хехе, можно еще попробовать научить, но это вариант на любителя ))

[Ankhena]

Demian Smith, учу я и так.

[luckyjenro0]

Ankhena, что Вам не нравится?

[Ankhena]

luckyjenro0, в большинстве случаев селекторов двойной вложенности более, чем достаточно.
Исключения могут быть для блоков, в которые контент вставляется пользователем или для повышения специфичности селекторов, чтобы перебить стили плагинов.
А 8 в ваших собственных стилях это перебор.

[luckyjenro0]

Ankhena, что плохого во вложеннсти такой? Сайт уже работает два года, все отлично.

[Ankhena]

luckyjenro0,
- для пользователя: много лишних байтиков
- для браузера: нужно проверять элемент на соответствие всей этой колбасе
- для разработчика: необходимо писать селектор такой же или большей специфичности, чтобы что-то изменить. Сложности с переиспользованием блоков.

[luckyjenro0]

Ankhena, зато не надо придумывать постоянно кучу новых классов с раными названиями, а можно юзать один.

[Ankhena]

luckyjenro0, ну да, на придумывание .nav__link уходит очень много времени.
Вам в помощь https://github.com/yoksel/common-words

[luckyjenro0]

Ankhena, ну да, у меня например есть кучу блоков, в которые через grid сетку вложены блоки. Мне для них придумывать названия каждого? Проще для всех указать пути в css разные и стилизацию и там название класса одно .item-id.

[Ankhena]

luckyjenro0,

Мне для них придумывать названия каждого?

Да, именно так.
Но вы можете делать как хотите.

Answer 1

[luckyjenro0]

Уже решил))) :focus незаметил)