Estoy trabajando en una tarea para la escuela donde tengo que diseñar un sitio web para un libro que estoy leyendo. Creé un menú desplegable en mi barra de navegación, pero cuando cargo el sitio web por primera vez y navego a la barra, aparece abierto, después de eso, si lo cierro o lo abro, permanece en ese estado como debería. Me pregunto si hay algo que pueda implementar en mi código que tenga el menú desplegable cerrado cuando carga en el sitio web. si pudieras ayudarme sería muy apreciado.

Aquí está el código para el segmento de la barra de navegación de mi HTML:

 div class="item"> <a class="sub-btn"><i class=""></i>Character Analysis<i class="fas fa-angle-right dropdown"></i></a> <div class="sub-menu"> <a href="francis.html" class="sub-item">Francis</a> <a href="michael.html" class="sub-item">Michael</a> <a href="aisha.html" class="sub-item">Aisha</a> <a href="mother.html" class="sub-item">Mother</a> </div> </div>

Aquí está el código CSS relacionado con el menú desplegable:

 .side-bar .menu .item a .dropdown{ position: absolute; right: 0; margin: 20px; transition: 0.5s ease; } .side-bar .menu .item .sub-menu{ background: rgba(255, 255, 255, 0.1) } .side-bar .menu .item .sub-menu a{ padding-left: 80px; } .rotate{ transform: rotate(90deg); }

Y finalmente aquí está el javascript responsable de abrir y cerrar el menú desplegable:

 $('.sub-btn').click(function(){ $(this).next('.sub-menu').slideToggle(); $(this).find('.dropdown').toggleClass('rotate'); });