Как изменить при клике — на + before, after jquery?

Question

[freeman0204]

Изначально видно минус h3:before при клике нужно добавить h3:after и если еще раз кликнуть, т.е .скрыть то убрать h3:after. Что то не выходит у меня. Что нужно дописать в jquery?

$('.catalog_box h3').click(function () {
    $('.menur').slideToggle('slow')
});

.catalog .left_box h3:before {
    content: '';
    position: absolute;
    width: 21px;
    height: 9px;
    background-color: #d20202;
    left: 0;
    top: 50%;
    transform: translate(0, -50%); }

.catalog .left_box h3:after {
    content: '';
    position: absolute;
    width: 9px;
    height: 21px;
    background-color: #d20202;
    left: 6px;
    top: 50%;
    transform: translate(0, -50%);
    display: none;
    }

Answer 1

[Сергей Мелодин]

На сами псевдоэлементы влиять нельзя через JS, но ты можешь назначить другой класс, у которого псевдоэлементы будут отвечать заданным стилям.

Comments

[freeman0204]

Не совсем понял. Как это сделать?

[e5ash]

freeman0204, сделайте через див в h3

[freeman0204]

e5ash, я не пойму как) приведите пример

[Сергей Мелодин]

freeman0204, делаешь элементу два класса, у каждого класса есть псевдоэлементы. Например, класс .disabled со своим after и before и enabled со своими.

Поскольку ты сами псевдоэлементы менять не можешь, ты просто меньяешь класс:
$('.enabled').addClass('disabled').removeClass('enabled');

Answer 2

[Ankhena]

$('.catalog_box h3').click(function () {
    $('.menur').slideToggle('slow');
    $(this).toggleClass("active")
});

При открытии добавлять какой-то класс, например, active. А к нему уже ::before.
Через js напрямую не достучаться до псевдоэлементов, потому что они псевдо.

http://jquery.page2page.ru/index.php5/Варьирование...

Comments

[freeman0204]

.active {
 position: absolute;
    width: 9px;
    height: 21px;
    background-color: #d20202;
    left: 6px;
    top: 50%;
    transform: translate(0, -50%);
    display: none;
}

Так?

[Ankhena]

freeman0204, неа, .active это же класс к h3.
Значит,.active::before и дальше как было. Без active плюс, с ним минус. И без display none