Pode parecer simples essa pergunta, mas não consigo encontrar uma resposta de qualidade. Tenho um ícone de seta e quando clicar nela, quero que ela rode 180 graus. O código que comecei a usar foi esse:
$('.arrow').click(function() {
$('.rodar').toggleClass('rodado');
});
.rodado{
transform:rotate(180deg);
transition: all 0.3s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons dots green arrow rodar">keyboard_arrow_down</i>
<br>
<i class="material-icons dots green arrow rodar">keyboard_arrow_down</i>
Mas como podem ver no exemplo, se clico em uma, as duas rodam. O this
não funciona. Tem como fazer isso de alguma forma?