Поворот кнопки с использованием js

@amaymon · Регистрация: 16.10.2016

Студворк — интернет-сервис помощи студентам

Помогите пожалуйста
При нажатии на .btn-expand или .filter-section .text кнопка должна переворачиваться. Для этого нужно для :before задать transform:rotate(360deg), а к псевдоэлементам нет доступа из javascript. Поэтому добавила новый класс с :before при клике, но тоже не работает
Вот код целиком ->>> https://jsfiddle.net/pdgeatbs/

@vettel · 07.11.2016, 22:52

amaymon,
во-первых, замените обработчик live на on (первый устарел).
Во-вторых, поменяйте addClass на toggleClass, иначе все отработает только раз. И в первом обработчике:

JavaScript
1
$(this).closest('header').next('.btn-expand').addClass("active");

Замените метод next на children or find (кнопка - ребенок хэдера, а не следующий после него элемент).

В-третьих (и наиболее главная проблема) - это css.

CSS
1
2
3
.btn-expand .active:before {
    transform:rotate(360deg);
}

Зачем после btn-expand пробел? Это ошибка, так оно будет искать эктив-класс у детей кнопки, а не у самой кнопки.

Ну и приоритетность. Код ваш не работает из-за того, что вот это правило:

CSS
1
.filter-section.expanded .btn-expand:before{-webkit-transform:rotate(180deg);transform:rotate(180deg)}

"Перевешивает" это

CSS
1
2
3
.btn-expand.active:before {
    transform:rotate(360deg);
}

Поменяйте код на такой:

CSS
1
2
3
.filter-section.expanded .btn-expand.active:before {
    transform:rotate(360deg);
}

- и будет работать.

На вашем примере переделал: https://jsfiddle.net/pdgeatbs/2/

@amaymon · 07.11.2016, 23:24 **[ТС]**

vettel,
спасибо, можете подсказать еще почему так же не работает с верхним закрывающимся блоком "Фильтр"? класс так даже не добавляется
https://jsfiddle.net/28ubeq82/
и извиняюсь что в цсс там нереальное количество классов сейчас, которые не используються, долго грузит так

@vettel · 08.11.2016, 11:46

amaymon,
1) юзайте поворот на 180 градусов, а не 360;
2) добавьте к самому .toggle-filter .text:after какой-то transition для плавности.

Новые блоги и статьи Все статьи Все блоги /
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .

@amaymon 0 / 0 / 0 Регистрация: 16.10.2016 Сообщений: 5

	Поворот кнопки с использованием js 07.11.2016, 22:13. Показов 4136. Ответов 3 Метки css, html (Все метки) Помогите пожалуйста При нажатии на .btn-expand или .filter-section .text кнопка должна переворачиваться. Для этого нужно для :before задать transform:rotate(360deg), а к псевдоэлементам нет доступа из javascript. Поэтому добавила новый класс с :before при клике, но тоже не работает Вот код целиком ->>> https://jsfiddle.net/pdgeatbs/ 0

@amaymon 0 / 0 / 0 Регистрация: 16.10.2016 Сообщений: 5
	07.11.2016, 23:24 [ТС]
	vettel, спасибо, можете подсказать еще почему так же не работает с верхним закрывающимся блоком "Фильтр"? класс так даже не добавляется https://jsfiddle.net/28ubeq82/ и извиняюсь что в цсс там нереальное количество классов сейчас, которые не используються, долго грузит так 0

@vettel 84 / 84 / 41 Регистрация: 14.02.2015 Сообщений: 320
	08.11.2016, 11:46
	amaymon, 1) юзайте поворот на 180 градусов, а не 360; 2) добавьте к самому .toggle-filter .text:after какой-то transition для плавности. 1

Опции темы