1

Tengo un menú con opciones dentro y al dar clic en una opción me carga la página (refresca) pero el menú vuelve a su estado original, se contrae.

¿De que forma puedo dejar el menú expandido después de dar clic a una opción? Probé con localStorage pero no sé como implementarlo adecuadamente

-- CODIGO DEL MENU VERTICAL (menu_vertical.php) --

    <?php
    #LIBRERÍAS
    require ("../includes/header.php");
    ?>
    
    <div class='nav-vertical'>
        <div class="dashboard-nav">
            <nav class="dashboard-nav-list">
                <div class='dashboard-nav-dropdown'><a class="dashboard-nav-item dashboard-nav-dropdown-toggle">
                    <i class="fas fa-chart-pie-alt"></i> Reportes</a>
                    <div class='dashboard-nav-dropdown-menu'>
                        <a href="test1.php" class="dashboard-nav-dropdown-item"><i class="fas fa-file-alt"></i>Test1</a>
                        <a href="test2.php" class="dashboard-nav-dropdown-item"><i class="fas fa-file-alt"></i>Test2</a>
                        <a href="test3.php" class="dashboard-nav-dropdown-item"><i class="fas fa-file-alt"></i>Test3</a>
                        <a href="test4.php" class="dashboard-nav-dropdown-item"><i class="fas fa-file-alt"></i>Test4</a>
                        <a href="test5.php" class="dashboard-nav-dropdown-item"><i class="fas fa-file-alt"></i>Test5</a>
                        <a href="test6.php" class="dashboard-nav-dropdown-item"><i class="fas fa-file-alt"></i>Test6</a>
                    </div>
                </div>

                <div class='dashboard-nav-dropdown'><a class="dashboard-nav-item dashboard-nav-dropdown-toggle">
                    <i class="fas fa-chart-pie-alt"></i> Reportes 2</a>
                    <div class='dashboard-nav-dropdown-menu'>
                        <a href="testX1.php" class="dashboard-nav-dropdown-item"><i class="fas fa-file-alt"></i>TestX1</a>
                        <a href="testX2.php" class="dashboard-nav-dropdown-item"><i class="fas fa-file-alt"></i>TestX2</a>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    
    <?php 
    #SCRIPTS
    require ("../includes/footer.php");  
    ?>

-- CODIGO DE LA VISTA PRINCIPAL (index.php)

<?php
#MENU VERTICAL
require ("menu_vertical.php"); 
?>

<body>
  <img src='../images/Welcome.jpg'>
</body>

-- CODIGO DEL FOOTER (footer.php) --

<script src="../../includes/2022/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function () {
  //EXPANDIR EL MENU
      $('.dashboard-nav-dropdown-toggle').click(function(){
        var parent = $(this).parent();
        if(parent.hasClass('show')) { 
          parent.removeClass('show'); 
        } else {
          parent.addClass('show');
        }
      }); 
  });
</script>

1 respuesta 1

3

Has modificado la pregunta incluyendo otro menu desplegable que está utilizando las mismas clases. Esto modifica ligeramente la respuesta inicial. Haz estos cambios sobre tu código:

En el HTML ponle un ID a cada elemento de este tipo:

<div class='dashboard-nav-dropdown'>

de tal modo que sean únicos, por ejemplo:

<div class='dashboard-nav-dropdown' id="menu1">

Y en el javascript pon esto:

<script>
$(document).ready(function() {
  //EXPANDIR EL MENU
  $('.dashboard-nav-dropdown-toggle').click(function() {
    var parent = $(this).parent();
    if (parent.hasClass('show')) {
      parent.removeClass('show');
      localStorage.setItem("expandirMenu", "false");
    } else {
      parent.addClass('show');
      localStorage.setItem("expandirMenu", "true");
      localStorage.setItem("menuId", parent.attr('id'));
    }
  });

  if (typeof localStorage.getItem('expandirMenu') !== 'undefined' && localStorage.getItem('expandirMenu') !== null) {
    if (localStorage.getItem('expandirMenu') == "true") {
      $('#' + localStorage.getItem('menuId')).addClass('show');
    }
  }
});
</script>

Explicación de los cambios

  • Se ha agregado un atributo id con un valor único en cada elemento div que contiene la clase dashboard-nav-dropdown que servirá para después referenciarlo en el código javascript.
  • En el javascript, dentro de la función click para el selector de clase dashboard-nav-dropdown se ha establecido una variable del tipo localStorage denominada expandirMenu que almacena un valor booleano true o false según el menú está abierto o cerrado.
  • En el caso de que además esté abierto, se ha establecido otra variable del tipo localStorage denominada menuId que permite almacenar el id del elemento pulsado, para después, en caso de refresco de página, saber cual de ellos debe mostrarse abierto.
  • Fuera del evento click, se ha creado un condicional que comprueba si la variable localStorage con la clave expandirMenu ha sido creada, y en caso afirmativo, y si su valor es "true", entonces agregamos la clase show al elemento div con el id coincidente con la clave menuId de localStorage.
3
  • Funciona perfecto. Pero tengo un problemilla, quizá deba editar la pregunta. Tengo mas opciones con la clase dashboard-nav-dropdown-toggle , es decir En el menú tengo la opcion Reportes y otra opción Reportes2, al dar clic en cualquiera si se mantiene expandido, pero expande todos.
    – EvilFearzZ
    el 29 abr. 2022 a las 18:23
  • Acabo de modificar mi respuesta, echale un ojo a ver si así te vale. (aunque creo que va a ser que no, pues ahora se te abriran independientemente pero al refrescar solo se mantendrá abierto el último, y seguramente querrás modificar ese comportamiento de nuevo)
    – masterguru
    el 29 abr. 2022 a las 19:46
  • ¿Cómo no va a funcionar? ¡Claro que funciona! y es justamente el resultado que esperaba. Realmente eres un genio, Muchísimas gracias por tu ayuda
    – EvilFearzZ
    el 29 abr. 2022 a las 21:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.