Collapse Menu Bar Automatically with jQuery

Question

Collapse Menu Bar Automatically with jQuery

Navigation

#1 by (1 votes)

0

What friends on this occasion need to leave the menu with the event mouseout(); this automatically collapses but fails to do that, and I assigned an id to each element of the menu, what I'm doing wrong?

 $("#collapse").on("click", function(){

    });

    $("#side-bar").mouseout(function() {
        $("#collapse").on("click");
    });

Here I leave the image of the menu and its code respectively

Menu Collapsed:

This is the code of the menu and the collapsing button:

Menu:

<body class="hold-transition skin-black sidebar-mini">
    <!-- Site wrapper -->
    <div class="wrapper">
        <header class="main-header">
            <!-- Logo -->
            <a href="<?php echo base_url(); ?>" class="logo">
                <!-- mini logo for sidebar mini 50x50 pixels -->
                <span class="logo-mini"><b>S</b>V</span>
                <!-- logo for regular state and mobile devices -->
                <span class="logo-lg"><b>Sistema de Ventas</b></span>
            </a>
            <!-- Header Navbar: style can be found in header.less -->
            <nav class="navbar navbar-static-top">
                <!-- Sidebar toggle button-->
                <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button" id="collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <div class="navbar-custom-menu">
                    <ul class="nav navbar-nav">
                        <!-- Notifications: style can be found in dropdown.less -->

                        <!-- User Account: style can be found in dropdown.less -->
                        <li class="dropdown user user-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <img src="<?php echo base_url()?>img/logo_sol_futu.png" class="user-image" alt="User Image">
                                <span class="hidden-xs"><?php echo $this->session->userdata("nombre")?></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="user-body">
                                    <div class="row">
                                        <div class="col-xs-12 text-center">

                                        </div>
                                    </div>
                                    <!-- /.row -->
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>

This is the button that collapses:

            <li class="header">Menu</li>
                  <!-- Sidebar user panel -->
                <div class="user-panel">
                    <div class="pull-left image">

                    </div>
                    <div class="pull-left info">

                  <p><i class="fa fa-circle text-success"></i> En Linea</p>
                </div>
              </div>

            <?php echo $this->backend_lib->getMenu();?>
        </ul>
    </section>
    <!-- /.sidebar -->
</aside>

javascript jquery html

asked by WilsonicX 27.09.2018 в 23:39

source

1 answer

By clicking on the counter button NaN returns me Validate token and email from a url in php

score 1 · Accepted Answer

Try changing the mouseout to mouseleave and trigger to #collapse in the event mouseleave like this:

$("#side-bar").mouseleave(function() {
  $("#collapse").trigger("click");
});

With the trigger you are telling it to run an event from a third party. I hope it serves you.