Error in logic, icon does not change when I click the submenu

Question

Personal,

I’m still studying java script, I’m making a MENU and it’s working, I made it from scratch and I’m correcting every step I want and I didn’t have... I got stuck now...

The menu opens, goes down the submenu and goes up, right, but I put an icon to say when it goes down and when it goes up, and it changes in all situations, only one that does not... when the submenu returns... look at the logic I did, but there is something wrong with this if...

$(".button-menu").click(function() {
    document.getElementById("index-menu-left").style.width = "250px";
    $("div.menu-item-text").addClass("display-inline");
    $("div.menu-item-arrow").find('i').removeClass("fa-caret-down").addClass("fa-caret-right");
    if ($('#index-menu-left').hasClass('show')) {
        $(this).find('i').removeClass("fa-caret-right").addClass("fa-caret-down");
    }
})

That ". show" is the class that add when it opens the submenu, and wanted to catch it to change the arrow... if there is this class, the arrow goes down when it does not, it stands right.

With this one works, but when I click on another link, the icon does not change

$(this).find('i').toggleClass("fa-caret-right fa-caret-down");  

Answer 1

After picking up a bit and putting it in the way you wanted it, follow the final code:

<script type="text/javascript">
$(document).ready(function() {

	$(".button-menu").click(function() {
		$(".menu-item-arrow i").removeClass("fa-caret-down").addClass("fa-caret-right"); 
		var expanded = this.getAttribute('aria-expanded')
      	if (expanded === 'false') {
			$(this).find('.menu-item-arrow i').removeClass("fa-caret-right").addClass("fa-caret-down"); 
      	} 
    })

	$("#index-menu-left").hover(function(){
		$("div.menu-item-text").removeClass("display-none").addClass("display-inline");	
		$(".button-menu").attr("aria-expanded","false");
	});
	$("#index-body").hover(function(){	
		$(".menu-item-text").removeClass("display-inline").addClass("display-none");	
		$(".menu-item-arrow i").removeClass("fa-caret-down").addClass("fa-caret-right");
		$(".collapse").removeClass("show");		
		$(".button-menu").attr("aria-expanded","false");
	});
});
</script>

Answer 2

Since the HTML code was not inserted, I made my own html and implemented a logic of how to fix the problem, follow the code below.

$(".button-menu .menu-item-arrow").click(function() { // evento ao clicar no meny
    $('.index-menu-left').hide('slow'); // caso exista algum menu visível irá ser ocultado
    $('.menu-item-arrow i').removeClass("fa-caret-down").addClass("fa-caret-right"); // Remove todos os ícones de down para right
    
    // Caso não tenha nenhum menu visível irá mostrar o menu do item clicado, caso o menu esteja visível e clicar sobre o mesmo, será ocultado como mostra a cima e não entrará nessa condição
    if($(this).next().is(':not(:visible)')){ // Verifica se o próximo elemento irmão não está visível
        $(this).find('i').toggleClass("fa-caret-right fa-caret-down"); // trocar o ícone de right para down e vice-versa
        $(this).next().show('slow'); // torna visível o próximo elemento irmão
    }
});

body{
    margin: 0px
}
.button-menu{
    width: 150px;
}
.button-menu .menu-item-arrow{
    list-style-type: none;
    width: 130px;
    display: flex;
    justify-content: space-between;
    padding: 5px 0px;
    background: #bbb;
    cursor: pointer
}
.button-menu .index-menu-left .menu-item-text{
    padding: 5px 20px;
    width: 110px;
    background: #ddd;
    line-height: 27px;
}
.button-menu .index-menu-left{
    display: none;
    position: absolute;
    top: 0;
    left: 130px;
    width: 130px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
<div class="button-menu">
    <div class="menu-item-arrow">Menu 1 <i class="fa fa-caret-right"></i></div>
    <div class="index-menu-left">
        <a href="#" class="menu-item-text">Sub-menu 1.1</a>
        <a href="#" class="menu-item-text">Sub-menu 1.2</a>
        <a href="#" class="menu-item-text">Sub-menu 1.3</a>
    </div>

    <div class="menu-item-arrow">Menu 2 <i class="fa fa-caret-right"></i></div>
    <div class="index-menu-left">
        <a href="#" class="menu-item-text">Sub-menu 2.1</a>
        <a href="#" class="menu-item-text">Sub-menu 2.2</a>
        <a href="#" class="menu-item-text">Sub-menu 2.3</a>
    </div>
    <div class="menu-item-arrow">Menu 3 <i class="fa fa-caret-right"></i></div>
    <div class="index-menu-left">
        <a href="#" class="menu-item-text">Sub-menu 3.1</a>
        <a href="#" class="menu-item-text">Sub-menu 3.2</a>
        <a href="#" class="menu-item-text">Sub-menu 3.3</a>
    </div>
</div>