Esconder sidebar ao clicar no menu

giulichajari · 28/06/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:

Inserir CODE, HTML ou PHP:

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

en JQUERY. Alguina sugerencia

ztvmark · 10/07/2019

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

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

giulichajari · 12/07/2019

ztvmark disse:
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/07/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/07/2019

jrobertorma disse:
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:

Inserir CODE, HTML ou PHP:

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

bkmiguel · 22/08/2019

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 ao clicar no menu

giulichajari

ztvmark

giulichajari

jrobertorma

giulichajari

bkmiguel

Tópicos similares