Esconder sidebar al hacer click en el menu

giulichajari · 28 Jun 2019

Tengo un sidebar colapsable y quiero al hacer click en un menu o submenu, que se abra la pantalla correspondiente pero que se esconda el sidebar.

El codigo html del sidebar es el siguiente:

HTML:

<div class="wrapper">
    <!-- Sidebar -->
    <nav id="sidebar">

        <div id="dismiss">
            <i class="fas fa-arrow-left"></i>
        </div>

        <div class="sidebar-header">
            <h3>MENU PRINCIPAL</h3>
        </div>

        <ul class="list-unstyled components">
            <ul >
                <li><a data-toggle="modal" data-target="#miModal" href="" >
             <i  class="glyphicon glyphicon-search"></i><span  id="art"> ARTICULO - F2</span>
        </a>
            </ul>
                <ul>
                <ul class="list-unstyled components">
            <ul >
                <li><a data-toggle="modal" data-target="#miModal" href="" >
            <i class="fas fa-wrench"></i><span  id="serv"> SERVICIO - F4</span>
        </a>
            </ul>
                <ul>  
                
            <ul class="list-unstyled components">
            <ul >
                <li><a data-toggle="modal" data-target="#modalCC" href="" >
             <i  class="glyphicon glyphicon-list"></i><span  id="CC"> CUENTAS   - F4</span>
        </a>
            </ul></ul></ul>
                <ul>  
demas codigo del menu

Y quise hacer lo siguiente:

Insertar CODE, HTML o PHP:

$('#sidebarCollapse').on('click', function () {
        $('#sidebar').toggleClass('active');
        $(this).toggleClass('active');
    });

en JQUERY. Alguina sugerencia

ztvmark · 10 Jul 2019

para usar jquery en worpress debes meter tu codigo en alguna de estas funciones

Usar '$' en vez de 'jQuery' en WordPress

giulichajari · 12 Jul 2019

ztvmark dijo:
para usar jquery en worpress debes meter tu codigo en alguna de estas funciones

Usar '$' en vez de 'jQuery' en WordPress

Gracias pero no uso Wordpress es una pagina de cero que hice para facturacion

jrobertorma · 29 Jul 2019

Puedes tomar el elemento del DOM con el identificador CSS del elemento a ocultar con jquery, después puedes modificar su valor CSS para la regla display a none por ejemplo.

giulichajari · 30 Jul 2019

jrobertorma dijo:
Puedes tomar el elemento del DOM con el identificador CSS del elemento a ocultar con jquery, después puedes modificar su valor CSS para la regla display a none por ejemplo.

Probe con:

HTML:

$('ul li').on('click', function () {

$("#sidebar").css("display", "none");
        
        });

Pero se esconde y no entra al enlace y el boton de la barra no funciona es decir queda escondida y no se vuelve a mostrar.

Otra cosa que se me ocurrio es cambiar la propiedad display al cargar una pagina es decir en el ready del documento.
Pero luego debo codificar para que se vuelva a mostrar al hacer click:

Insertar CODE, HTML o PHP:

  $('#sidebarCollapse').on('click', function () {
    var mostrado = $("#sidebar").css("display");
    if (mostrado=="none"){
        $("#sidebar").css("display", "block");
    }else{
          $("#sidebar").css("display", "none");
    }
        
    });

bkmiguel · 2019-08-22T17:48:22-0500

Hola @giulichajari !

Creo que estoy llegando suuuper tarde pero apenas hoy me registre !.

No te compliques con tanto codigo, solo con usar la propiedad toggle() de jQuery... puedes hacer aparecer y desaparecer lel elemento del DOM que estes obteniendo en el selector, en este caso el sidebar.

En sintesis hace lo que tu estabas intentando hacer en el segundo tramo de codigo. IOncluso tiene varios parametros para hacerlo un poco mas dinamico con transiciones y animaciones.

Te dejo la documentacion oficial de todos modos 👍
jQuery .toggle()

Esconder sidebar al hacer click en el menu

giulichajari

ztvmark

giulichajari

jrobertorma

giulichajari

bkmiguel

Temas similares