2

Tengo un menú lateral un poco simple que tiene un evento Toggle que muestra y oculta dicho menú al darle click en su respectivo botón.

introducir la descripción de la imagen aquí

Quisiera que me ayudaran a lograr que cuando se haga click en cualquier parte de la pagina fuera del menu, este automaticamente se oculte.

JavaScript

$(document).ready(function () {
            $('#BtMenuDez').on('click', function () {
                $('#MenuDez').toggle('slide'/*'slow'*/);
            });
        });

HTML

<ul id="menu" style="width: 85px;height: 70px;">
                    <li style="border-radius: 3px;">
                        <a href="#" id="BtMenuDez" style=""><i class="fa fa-bars fa-2x"></i></a>
                        <div id="MenuDez" style="display:none">
                            <ul> 
                                <li><a id="Menu1" href="#Inicio">Inicio</a></li><br />
                                <li><a id="Menu2" href="#Propositos">Propositos</a></li><br />
                                <li><a id="Menu3" href="#5S">5S</a></li><br />
                                <li><a id="Menu7" href="#Mudas">Mudas</a></li><br />
                                <li><a id="Menu8" href="#Poka-Yoke">Poka-Yoke</a></li><br />
                                <li><a id="Menu4" href="#Kanban">Kanban</a></li><br />
                                <li><a id="Menu5" href="#Hansei">Hansei</a></li><br />
                                <li><a id="Menu6" href="#Hacks">Hack's</a></li><br />
                                <li><a id="Menu9" href="#Glosario">Glosario</a></li>
                                <li><a id="Menu10" href="#Contactenos">Contáctenos</a></li>
                            </ul>
                        </div>
                    </li>                
                </ul>

1
  • 1
    Podrías indicar si utilizas alguna librería (tipo jQuery) o framework (tipo Angular)? O simplemente vanilla JS, para tratar de adecuar la respuesta al contexto y código de tu aplicación
    – Sema
    el 18 jun. 2018 a las 16:56

2 respuestas 2

3

Añade el siguiente código para completar tu parte JavaScript:

$(document).ready(function () {
  $(document).on('mouseup', function(e){
    const container = $("#BtnMenuDez");
    if(!container.is(e.target) && container.has(e.target).length === 0) {
      $('#MenuDez').hide('slide');
    }
  });

  $('#BtMenuDez').on('click', function () {
    $('#MenuDez').show('slide');
  });
});

Lo que se está haciendo es que cuando se haya soltado el botón después de clicar, comprobar si el menú ya está mostrado, y en ese caso, ocultarlo.

1
  • 1
    Te dejo un jsfiddle aquí
    – Sema
    el 18 jun. 2018 a las 17:19
1

puedes probar de esta manera:

$(document).mouseup(function(e) 
{
    var container = $('#MenuDez');

    // Si el elemento cliqueado no pertenece al contenedor padre
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});

Saludos!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.