Class change problem in jQuery

Question

I am developing a simple layout with HTML, CSS and jQuery.

My problem is that the left icon is being replaced by the right arrows when I select an 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();
        }
    });

});

Answer 1

It’s because you’re changing all the <i> of all menu items. You would have to change only those that contain a <ul>.

I also put in CSS the style below so that ul’s start closed:

.menu ul{
   display: none;
}

See below how it looks and I took advantage to give an improved code:

$(document).ready(function () {

    $('.menu li:has(ul)').click(function(e){
        e.preventDefault();

        // fecha o menu que estiver aberto
        // que não seja o que foi clicado
        $('.menu li.ativado')
        .not(this)
        .removeClass('ativado')
        .find('i')
        .toggleClass('fa-chevron-down fa-chevron-right')
        .end()
        .find('ul')
        .slideUp();
        
        if($(this).hasClass('ativado')) {
            $(this)
            .removeClass('ativado')
            .find('i')
            .toggleClass('fa-chevron-down fa-chevron-right')
            .end()
            .find('ul')
            .slideUp();
        } else {
            $(this)
            .addClass('ativado')
            .find('i')
            .toggleClass('fa-chevron-right fa-chevron-down')
            .end()
            .find('ul')
            .slideDown();
        }
    });

});

.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;
}

.menu ul{
   display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<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-down"></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-down"></i></a>
       <ul>
           <li><a href="#">Pedidos</a></li>
           <li><a href="#">Produtos</a></li>
       </ul>
   </li>
</ul>