este es mi menú
<ul> <li class="nav-item"> <a class="nav-link sub-parent"> <i class="nav-icon fas fa-tachometer-alt"></i> <p> Dashboard <i class="right fas fa-angle-left"></i> </p> </a> <ul class="nav sub-menu"> <li class="nav-item"> <a href="../../index.html" class="nav-link"> <i class="far fa-circle nav-icon"></i> <p>Dashboard v1</p> </a> </li> </ul> </li> </ul>esta es la función jquery que uso para el submenú
$(document).ready(function(){ $('.sub-parent').click(function(e){ e.preventDefault(); $(this).next('.sub-menu').slideToggle(); }); });clase css
.sub-menu{display: none;}Actualmente se muestra el icono de flecha izquierda en el menú. Usé esto para eso
cuando se abre el submenú, necesito cambiar este ícono. Cómo lo hago.?
Puede usar la propiedad de transform para rotar el icono.
Modificó su código para que funcione, verifique a continuación.
$(document).ready(function(){ $('.sub-parent').click(function(e){ e.preventDefault(); $(this).next('.sub-menu').slideToggle(); }); $('.sub-parent p').click(function(e){ e.preventDefault(); $(".right").toggleClass('rotate-icon'); }); }); .sub-menu{display: none;} .right{ transition: 0.5s transform ease-in-out; } .rotate-icon { transform:rotate(-90deg); } <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li class="nav-item"> <a class="nav-link sub-parent"> <i class="nav-icon fas fa-tachometer-alt"></i> <p> Dashboard <i class="right fas fa-angle-left"></i> </p> </a> <ul class="nav sub-menu"> <li class="nav-item"> <a href="../../index.html" class="nav-link"> <i class="far fa-circle nav-icon"></i> <p>Dashboard v1</p> </a> </li> </ul> </li> </ul>Puedes usar:
$(document).ready(function(){ $('.sub-parent').click(function(e){ e.preventDefault(); $(this).next('.sub-menu').slideToggle(); $(this).children('p i').toggleClass('fa-angle-left') $(this).children('p i').toggleClass('fa-angle-right') }); });