Esconder sidebar al hacer click en el menu

giulichajari

Beta
Verificación en dos pasos desactivada
Desde
12 Feb 2016
Mensajes
81
Edad
28
Crédito(s)
1
Puntos
160
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
 

jrobertorma

Alfa
Verificación en dos pasos desactivada
Desde
9 May 2019
Mensajes
17
Crédito(s)
0
Puntos
27
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

Beta
Verificación en dos pasos desactivada
Desde
12 Feb 2016
Mensajes
81
Edad
28
Crédito(s)
1
Puntos
160
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

Beta
Verificación en dos pasos desactivada
Desde
22 Ago 2019
Mensajes
33
Crédito(s)
0
Puntos
0
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()
 

Arriba