-1

Pessoal,

Ainda estou estudando java script, estou fazendo um MENU e está funcionando, fiz do zero e estou corrigindo cada etapa que desejo e não tinha... fiquei em um impasse agora...

O menu abre, desce o submenu e sobe, certinho, porém coloquei um ícone para informar quando desce e quando sobe, e ele muda em todas as situações, apenas uma que não... quando o submenu retorna... olha a lógica que fiz, mas está algo errado nesse 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");
    }
})

Esse ".show" é a class que add quando abre o submenu, e queria pegar ela para mudar a seta... se existe essa classe, a seta fica para baixo, quando não, ela fica para direita.

Com esse aqui funciona, porém quando clico em outro link, o ícone não muda

$(this).find('i').toggleClass("fa-caret-right fa-caret-down");  
1
  • Cara se vc postar o HTML/CSS vai te ajudar a conseguir uma resposta, sem eles não da para simular o seu problema
    – hugocsl
    7/02/2020 às 12:50

2 Respostas 2

0

Depois de apanhar um pouco e colocar nos moldes que desejava, segue como ficou o código final:

<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>

-1

Como não foi inserido o código HTML, fiz o meu próprio html e implementei uma lógica de como deveria corrigir o problema, segue o código abaixo.

$(".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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .