Поворот по клику

@-Daria- · Регистрация: 08.10.2013

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

Есть кнопка-спойлер, которая по клику сворачивает и разворачивает содержимое. Как сделать чтобы "крестик" при клике поворачивался по часовой и при повторном клике против часовой на 360^о?
Код самой кнопки и скрипт спойлера:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
$(document).ready(function(){
 $('.spoiler_link').click(function(){
  $(this).parent().children('div.spoiler_body').toggle('normal');
  return false;
 });
});
</script>
 
<div>
     <a href="" class="spoiler_link"><span>X</span></a>                
          <div class="spoiler_body">
               содержимое спойлера...
          </div>
</div>

@Lazy_Den · 19.05.2014, 17:36

-Daria-, пример смотрим тут. Если надо, то добавляете нужные вендорные префиксы.

JavaScript
1
2
3
4
5
6
7
$(document).ready(function(){
    $('.spoiler_link').click(function(){
        $(this).parent().children('div.spoiler_body').toggle('normal');
        $('span',this).toggleClass('rotate_but');
        return false;
    });
});

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.spoiler_link span {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #333;
    text-align: center;
    line-height: 30px;
    -webkit-transition: all 1s ease-out;
    transition: all 1s ease-out;
}
.spoiler_link .rotate_but {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

@-Daria- · 19.05.2014, 18:42 **[ТС]**

Lazy_Den, спасибо, всё как надо работает

@Panya- · 16.06.2017, 16:53

Подскажите, можно ли такой поворот задать нужному (другому) элементу (картинке или блоку с картинкой) через клик на кнопку или ссылку?
Если да, то на примере кода, подскажите куда какие классы расставить в качестве переменных

Сообщение от Lazy_Den

JavaScript
1
2
3
4
5
6
7
$(document).ready(function(){
* * $('.spoiler_link').click(function(){
* * * * $(this).parent().children('div.spoiler_body').toggle('normal');
* * * * $('span',this).toggleClass('rotate_but');
* * * * return false;
* * });
});

Добавлено через 1 час 50 минут
Вот моя песочница, недосоображу.

@Lazy_Den · 16.06.2017, 17:01

Panya-, селектор указан не верно.

JavaScript
1
$('.spoiler_link span').toggleClass('rotate_but');

@Panya- · 16.06.2017, 20:53

Сообщение от Lazy_Den

Panya-, селектор указан не верно.

Спасибо мудрейший!
Могли бы Вы еще мини-коммент дать, достаточно 1 уникальный класс/атрибут указать или если количество селекторов 2+ (например в классе 2-3 значения) нужно перечислять все?

@Lazy_Den · 16.06.2017, 20:58

Panya-, селекторы jQuery, за редким исключением, используются такие же, как и в CSS. Представьте, как бы вы задавали стили какому-то отдельному элементу или же группе элементов и точно так же можно записать в jQuery

@Panya- · 17.06.2017, 12:41

Lazy_Den,
я поэкспериментировал с тегами в песочнице, скрипт не захотел с img работать, пришлось обернуть картинку в span.
Потом добавил span с картинкой в скрипт вторым элементом - в песочнице оба элемента вращались.
Поправил в текстовом редакторе под свои селекторы - и скрипт перестал срабатывать в браузерах (один Maxthon исполняет задуманное), и даже в песочнице.
В автопрефиксере свойства transition и transform сверил, требуют только -webkit.

Добавлено через 25 минут
Привел к такому виду в песочнице заработало.
Пришлось span-обертке присвоить класс и использовать его. Хотя в исходном коде к теме достаточно было использовать span как самодостачный селектор.
Во всех браузерах срабатывает. IE (11) только против анимации как с префиксами, так и без. (Edge вообще своей жизнью живет, не открывая страницы с локального веб-сервера).

Остался вопрос, возможно ли не громадить верстку и код, а напрямую обратиться к img и его селекторам для анимации?

@Lazy_Den · 17.06.2017, 14:04

Сообщение от Panya-

напрямую обратиться к img

Естественно можно.

@Panya- · 17.06.2017, 15:28

Lazy_Den, Да Вы - волшебник, даже в примере в обе стороны вращается) у меня только в одну без return false

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@-Daria- 0 / 0 / 0 Регистрация: 08.10.2013 Сообщений: 11
	19.05.2014, 18:42 [ТС]
	Lazy_Den, спасибо, всё как надо работает 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	16.06.2017, 20:58
	Panya-, селекторы jQuery, за редким исключением, используются такие же, как и в CSS. Представьте, как бы вы задавали стили какому-то отдельному элементу или же группе элементов и точно так же можно записать в jQuery 1

@Panya- 0 / 0 / 0 Регистрация: 16.06.2017 Сообщений: 4
	17.06.2017, 12:41
	Lazy_Den, я поэкспериментировал с тегами в песочнице, скрипт не захотел с img работать, пришлось обернуть картинку в span. Потом добавил span с картинкой в скрипт вторым элементом - в песочнице оба элемента вращались. Поправил в текстовом редакторе под свои селекторы - и скрипт перестал срабатывать в браузерах (один Maxthon исполняет задуманное), и даже в песочнице. В автопрефиксере свойства transition и transform сверил, требуют только -webkit. Добавлено через 25 минут Привел к такому виду в песочнице заработало. Пришлось span-обертке присвоить класс и использовать его. Хотя в исходном коде к теме достаточно было использовать span как самодостачный селектор. Во всех браузерах срабатывает. IE (11) только против анимации как с префиксами, так и без. (Edge вообще своей жизнью живет, не открывая страницы с локального веб-сервера). Остался вопрос, возможно ли не громадить верстку и код, а напрямую обратиться к img и его селекторам для анимации? 0

@Panya- 0 / 0 / 0 Регистрация: 16.06.2017 Сообщений: 4
	17.06.2017, 15:28
	Lazy_Den, Да Вы - волшебник, даже в примере в обе стороны вращается) у меня только в одну без return false 0