Задать вопрос
@1programmer
javascript

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

Привет всем.
Есть меню
5a995d9ad3cc1315144194.png
Стрелочки которые справа заданы с помощью 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(){
					
				}
			}
  • Вопрос задан
  • 710 просмотров
3 комментария
Подписаться 1 Простой 3 комментария
Решения вопроса 1
tema_sun
@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);
}
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ответы на вопрос 1
@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');
				}
			}
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
8266 f12 требуется сделать ревью и оптимизировать работу
26 апр. 2024, в 20:42
2000 руб./за проект
Доработать и интегрировать модуль на WordPress
26 апр. 2024, в 19:53
5000 руб./за проект
Разработать Telegram mini app
15 апр. 2024, в 22:14
30000 руб./за проект
Ещё заказы