Tengo una clase de alternancia simple de jQuery y elimino una clase.
Supongamos que tengo 5 menús. Ahora, cuando hago clic en un menú, la flecha se establecerá en la posición hacia abajo.
Luego, ahora intente hacer clic en otro menú, la flecha hacia abajo del menú anterior no está atrás de la posición original.
Lo que necesito es cuando hago clic en un menú, luego hago clic en otro menú y luego otra flecha debería volver a la posición original.
for(var i=0; i<5; i++) { var el = "<div class='click' style='padding: 10px; cursor: pointer;'><i class='fa-regular fa-angle-right'></i></div>"; $(".menu").append(el); } $(".click").click(function(e) { $(".menu").removeClass("expanded"); $(this).find("i").toggleClass("expanded"); }); .expanded { transform: rotate(90deg); opacity: 1; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.1.2/css/all.css"> <div class="menu"></div>Una solución es removeClass de todos los elementos i excepto en el que se clicked con el método not .
$(".click i").not(iEle).removeClass("expanded"); Antes de toggleClass para hacer clicked en uno.
for(var i=0; i<5; i++) { var el = "<div class='click' style='padding: 10px; cursor: pointer;'><i class='fa-regular fa-angle-right'></i></div>"; $(".menu").append(el); } $(".click").click(function(e) { const iEle = $(this).find("i"); $(".click i").not(iEle).removeClass("expanded"); iEle.toggleClass("expanded"); }); .expanded { transform: rotate(90deg); opacity: 1; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.1.2/css/all.css"> <div class="menu"></div>