1

Estoy haciendo un sidebar con un botón que al presionarlo hace que se oculte y despliegue, mi problema es que dentro del botón puse un icono que quiero que cambie dependiendo del estado actual del sidebar, pero solo cambia al momento de desplegar el sidebar y cuando lo vuelvo a presionar ya no cambia de regreso al icono original, este es el ejemplo con el que estoy trabajando: Ejemplo botón sidebar

Y bueno como pregunta extra usando "text" en la linea "$(this).html($(this).html()" en lugar de "html" si cambia correctamente pero este no me sirve porque no puede meter el icono que quiero, si alguien me puede explicar a que se debe esto si es lo mismo salvo por ese cambio que comento.Ejemplo usando "text"

Espero haber explicado mi problema claramente y de antemano gracias a los que se tomen el tiempo para ayudarme.

Saludos.

1 respuesta 1

2

No entendí muy bien la lógica de esta línea

$(this).html($(this).html() == "<i class='fas fa-chevron-left'></i> " ? "<i class='fas fa-chevron-right'></i>" : "<i class='fas fa-chevron-left'></i>   ");

Pero hubiera sido más sencillo si hubieras utilizado el método togleClass de jQuery.

Mira el ejemplo:

*{margin:0; padding:0; box-sizing:border-box;}

.container{height:100vh; overflow:hidden; display:flex; font:16px 'Open Sans', sans-serif;}

.sidebar{background:#ccc; min-width:320px; max-width:320px; overflow-y:auto; padding:10px 20px; margin-left:-320px; background:#f5f6fa; color:#333; transition:all 0.3s;}
.sidebar.active{margin-left:0;}

.main-body{width:100%;}
.main-header{background:#0c4685; color:#fff; padding:10px 0;}
.main-header #sidebarCollapse{background:rgba(0,0,0,0.5); border:0; color:#fff; padding:5px 10px; border-radius:5px; margin-left:10px;}

@media(min-width:768px){
    .sidebar{margin-left:-320px;}
    .sidebar.active{margin-left:0;}
}

@media(min-width:992px){
    #sidebarCollapse{display:none;}
    .sidebar{margin-left:0;}
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/chat-style.css">
    <title></title>
</head>
<body>
    <div class="container">
      <div id="sidebar" class="sidebar"></div>

      <div class="main-body">
        <div class="main-header">
            <button id="sidebarCollapse" type="button"><i class='fas fa-chevron-right'></i></button>            
        </div>
      </div>
    </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://kit.fontawesome.com/221b650539.js" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function () {
          $('#sidebarCollapse').on('click', function () {
            $('#sidebar').toggleClass('active');
        
           //$(this).html($(this).html() == "<i class='fas fa-chevron-left'></i> " ? "<i class='fas fa-chevron-right'></i>" : "<i class='fas fa-chevron-left'></i>   ");
           $(this).children("i").toggleClass("fa-chevron-right").toggleClass("fa-chevron-left");
          });
        });
    </script>
</body>
</html>

1
  • Muchas gracias por tu ayuda, resolviste mi problema. La verdad es que el primer código lo tome de internet tal vez por esa razón no tenia mucha lógica como dices, tengo poco utilizando javascript y jquery por eso aun no estoy muy familiarizado, muchas gracias otra vez. Saludos.
    – Gir
    Commented el 4 sept. 2020 a las 14:53

Tu Respuesta

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

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