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");
    }
        
    });
 

Arriba