estou desenvolvendo um layout simples com html, css e jquery. O meu problema é que o icone da esquerda está sendo trocado pelas setas da direia quando eu seleciono um accordion.
HTML
<ul class="menu"> <li><a href="#"><i class="icone icone-menu fas fa-home"></i>Inicio</a></li> <li><a href="#"><i class="icone icone-menu fas fa-address-book"></i>Clientes</a></li> <li><a href="#">Fornecedores</a></li> <li><a href="#">Orçamentos</a></li> <li><a href="#">Pedidos</a></li> <li><a href="#">Produtos<i class="icone fechado fas fa-chevron-right"></i></a> <ul> <li><a href="#">Categoria</a></li> <li><a href="#">Subcategoria</a></li> <li><a href="#">Produtos</a></li> </ul> </li> <li><a href="#">Relatórios<i class="icone fechado fas fa-chevron-right"></i></a> <ul> <li><a href="#">Pedidos</a></li> <li><a href="#">Produtos</a></li> </ul> </li> </ul> CSS
.sidebar ul { list-style: none; } .sidebar .menu li a { text-decoration: none; display: block; padding: 15px 20px; } .sidebar .menu li a:hover { color: #485053; background: #e2e2e2; } .sidebar .menu .icone { font-size: 18px; } .sidebar .menu .icone { font-size: 12px; } .sidebar .menu .icone.fechado{ margin-left: 10px; float: right; } .sidebar .menu .icone.icone-menu { margin-right: 10px; } .sidebar .menu ul { display: none; } .sidebar .menu ul li a { background: #343a40; } .sidebar .menu .ativado > a { color: #485053; background: #e2e2e2; } Jquery
$ (document).ready(function () { $ ('.menu li:has(ul)').click(function(e){ e.preventDefault(); if($ (this).hasClass('ativado')) { $ (this).removeClass('ativado'); $ ('.menu li i').removeClass('fas fa-chevron-down'); $ ('.menu li i').addClass('fas fa-chevron-right'); $ (this).children('ul').slideUp(); } else { $ ('.menu li ul').slideUp(); $ ('.menu li').removeClass('ativado'); $ (this).addClass('ativado'); $ ('.menu li i').removeClass('fas fa-chevron-right'); $ ('.menu li i').addClass('fas fa-chevron-down'); $ (this).children('ul').slideDown(); } }); }); 