Как повернуть стрелочку заданную через after js?

Question

[1programmer]

Привет всем.
Есть меню

Стрелочки которые справа заданы с помощью after для элемента li

.b-sidebar__menu__item::after{
	position: absolute;
    top: 24px;
    content: "";
    width: 8px;
    height: 8px;
    border: 1px solid #000000;
    border-width: 1px 0 0 1px;
    transform: rotate(135deg);
    right: 20px;

}

Как изменить rotate при клике на пункт меню? Что бы стрелочка смотрела вниз или через after не получится?
Элементы получаю вот так

var item = document.getElementsByClassName('b-sidebar__menu__item');
			for (var i = item.length - 1; i >= 0; i--) {
				item[i].onclick = function(){
					
				}
			}

Comments

[Kovalsky]

Думаю вам придётся прибегнуть к почти забытой всеми древнеиндийской практике добавления класса, в котором будет описан нужный угол поворота.

[Илья]

.b-sidebar__menu__item.active::after{
    transform: rotate(90deg); /*Указать сколько нужно*/
}

$('.b-sidebar__menu__item').on('click',function(){
$(this).addClass('active');
})

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

[1programmer]

Илья, нужно использовать только js

Answer 1

[tema_sun]

При клике добавляйте элементу класс, а в css правьте transform для :after этого элемента.
Т.е. css станет примерно таким:

.b-sidebar__menu__item::after{
  position: absolute;
    top: 24px;
    content: "";
    width: 8px;
    height: 8px;
    border: 1px solid #000000;
    border-width: 1px 0 0 1px;
    transform: rotate(135deg);
    right: 20px;
}

.b-sidebar__menu__item--clicked::after{
  transform: rotate(77deg);
}

Comments

[1programmer]

Пробовал вот так, но не меняется

var item = document.getElementsByClassName('b-sidebar__menu__item');
			for (var i = item.length - 1; i >= 0; i--) {
				item[i].onclick = function(){
					item.classList.add("b-sidebar__menu__item--clicked");
				}
			}

[Илья]

1programmer, Это надо в ЦСС вставлять

[1programmer]

Илья, .

.b-sidebar__menu__item--clicked::after{
	transform: rotate(225deg);
}

Вот так в css

Answer 2

[1programmer]

Решил проблему. Не работало правильно потому что в li есть тег a, в котором не было href и при каждом клике обновлялась страница и js не отрабатывал.
Поставил href=# и все заработало)

var item = document.getElementsByClassName('b-sidebar__menu__item');
			for (var i = item.length - 1; i >= 0; i--) {
				item[i].onclick = function(){
					this.classList.add('b-sidebar__menu__item--clicked');
				}
			}