Tengo problemas para crear un menú desplegable móvil en wordpress. Me gustaría hacer una rotación de 180 ° de la flecha, "al hacer clic".
El problema es que estoy en wordpress y no puedo cambiar mi código html. Entonces agregué un pseudo-elemento: después en el css para obtener una flecha.
Me gustaría saber cómo seleccionarlo (en css o js) para crear y llamar a esta rotación.
Muchas gracias por su ayuda, aquí está el fragmento:
.menu-item-has-children .sub-menu .menu-item-object-page a { margin: 0 0 0 1rem; } .mobile-menu .sub-menu { display: inherit; transition: height 0.2s; opacity: 0; position:relative; height:0; padding-top:0; padding-bottom:0; visibility: hidden; } .mobile-menu li:hover .sub-menu { opacity: 1; } .mobile-menu li:hover .sub-menu li { height:auto; padding: 1rem 0; } .mobile-menu .sub-menu li { height:0; padding-top:0; padding-bottom:0; } .menu-item-has-children:hover .sub-menu { /*display: block;*/ visibility: visible; transform: translateY(0px); } .mobile-menu .sub-menu li:hover { background-color: transparent; } .mobile-menu .menu-item-has-children > a::after { content: "\276F"; display: inline-block; transform: rotate(90deg); } .mobile-menu .menu-item-has-children a { display: flex; justify-content: space-between; } .menu-item-has-children { position: relative; display: inline-block; } .sub-menu { display: none; position: absolute; width: 240px; z-index: 1; padding: 17px 20px 20px 20px; background: #FFFFFF; box-shadow: 0px 10px 10px rgb(115 132 167 / 40%); border-radius: 0px 0px 20px 20px; transition: all 0.4s ease; } .sub-menu li { text-decoration: none; display: block; width: 100%; text-align: left; padding: 15px 5px 15px; transition: all 0.4s ease; } <div class="mobile-menu"> <ul class="menu"> <li class="menu-item-has-children"> <a aria-haspopup="true" aria-expanded="false" rel="external">MENU A</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page ">1</li> <li class="menu-item menu-item-type-post_type menu-item-object-page ">2</li> <li class="menu-item menu-item-type-post_type menu-item-object-page ">3</li> <li class="menu-item menu-item-type-post_type menu-item-object-page ">4</li> </ul> </li> </ul> </div> .menu-item-has-children .sub-menu .menu-item-object-page a { margin: 0 0 0 1rem; } .mobile-menu .sub-menu { display: inherit; transition: height 0.2s; opacity: 0; position:relative; height:0; padding-top:0; padding-bottom:0; visibility: hidden; } .mobile-menu li:hover .sub-menu { opacity: 1; } .mobile-menu li:hover .sub-menu li { height:auto; padding: 1rem 0; } .mobile-menu .sub-menu li { height:0; padding-top:0; padding-bottom:0; } .menu-item-has-children:hover .sub-menu { /*display: block;*/ visibility: visible; transform: translateY(0px); } .mobile-menu .sub-menu li:hover { background-color: transparent; } .mobile-menu .menu-item-has-children > a::after { content: "\276F"; display: inline-block; transform: rotate(90deg); /* Add transition timing to match dropdown */ transition: all 0.4s ease; } /* New: Add hover and/or focus CSS */ .mobile-menu .menu-item-has-children:hover > a::after { transform: rotate(-90deg) } /* End New */ .mobile-menu .menu-item-has-children a { display: flex; justify-content: space-between; } .menu-item-has-children { position: relative; display: inline-block; } .sub-menu { display: none; position: absolute; width: 240px; z-index: 1; padding: 17px 20px 20px 20px; background: #FFFFFF; box-shadow: 0px 10px 10px rgb(115 132 167 / 40%); border-radius: 0px 0px 20px 20px; transition: all 0.4s ease; } .sub-menu li { text-decoration: none; display: block; width: 100%; text-align: left; padding: 15px 5px 15px; transition: all 0.4s ease; } <div class="mobile-menu"> <ul class="menu"> <li class="menu-item-has-children"> <a aria-haspopup="true" aria-expanded="false" rel="external">MENU A</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page ">1</li> <li class="menu-item menu-item-type-post_type menu-item-object-page ">2</li> <li class="menu-item menu-item-type-post_type menu-item-object-page ">3</li> <li class="menu-item menu-item-type-post_type menu-item-object-page ">4</li> </ul> </li> </ul> </div>