1

estoy intentando hacer que se cierre el menú cuando se hace click en cualquier lado de la ventana, he estado viendo algunos ejemplos que están por aquí, pero no me funcionan

 $('.downUp').click(function(e) {
    $('.openClose').hide();
    if ($(this).hasClass('open')) {
        $(this).removeClass('open');
    } else {
        $(this).next('.openClose').show();
        $(this).addClass('open');
    }
    e.stopPropagation();
});

//Abrimos menú en tablet
$('#imgburger').click(function() {
    if (($(window).width() <= 991)) {
        $('#smartBMH').slideToggle();
    };
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <ul class="ulMenuBarra">
        <li class="liMenuBarra">
            <a href="#" class="aMenuBarra downUp">SOBRE NOSOTROS</a>
            <div class="divSubMenuBarra openClose">
                <div class="container">
                    <ul class="ulSubMenuBarra">
                        <li class="col-md-2 liSubMenuBarra">
                            <a href="premios.html" class="aSubMenuBarra">
                                <img src="./img/header/premios.png " class="imgSubMenuBarra">
                                <span class="txtSubMenuBarra">PREMIOS</span>
                            </a>
                        </li>
                        <li class="col-md-2 liSubMenuBarra">
                            <a href="asociaciones.html" class="aSubMenuBarra">
                                <img src="./img/header/asociaciones.png" class="imgSubMenuBarra">
                                <span class="txtSubMenuBarra">ASOCIACIONES</span>
                            </a>
                        </li>
                        <li class="col-md-2 liSubMenuBarra">
                            <a href="aviacion_regional.html" class="aSubMenuBarra">
                                <img src="./img/header/aviacionRegional.png " class="imgSubMenuBarra">
                                <span class="txtSubMenuBarra">AVIACIÓN REGIONAL</span>
                            </a>
                        </li>
                        <li class="col-md-2 liSubMenuBarra">
                            <a href="cifras.html" class="aSubMenuBarra">
                                <img src="./img/header/cifras.png " class="imgSubMenuBarra">
                                <span class="txtSubMenuBarra">CIFRAS</span>
                            </a>
                        </li>
                        <li class="col-md-2 liSubMenuBarra">
                            <a href="nuestra_flota.html" class="aSubMenuBarra">
                                <img src="./img/header/nuevaFlota.png " class="imgSubMenuBarra">
                                <span class="txtSubMenuBarra">NUESTRA FLOTA </span>
                            </a>
                        </li>
                        <li class="col-md-2 liSubMenuBarra">
                            <a href="historia.html" class="aSubMenuBarra">
                                <img src="./img/header/historia.png " class="imgSubMenuBarra">
                                <span class="txtSubMenuBarra">HISTORIA</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </li>
    </ul>
</div>

Si alguien me pudiera ayudar, que se lo agradecería

3
  • 2
    Posible duplicado de ¿Cómo cerrar menú haciendo click fuera del mismo? Commented el 9 ene. 2019 a las 9:08
  • 2
    he visto la solución que me comentas y le he intentado probar antes de poner mi incidencia, pero no me ha funcionado y también he probado esta [es.stackoverflow.com/questions/173933/… y tampoco me funcionó
    – derek
    Commented el 9 ene. 2019 a las 9:17
  • 1
    ¿A qué te refieres con cualquier lado de la ventana? ¿Al hacer click en cualquier lado del submenú o al hacerlo en cualquier otro elemento que no sea el menú?
    – phpMyGuel
    Commented el 9 ene. 2019 a las 9:59

1 respuesta 1

4

Puede ser tan sencillo como lo siguiente: cuando abres el menú, añades un listener para todo el body para cerrarlo. Si haces click en cualquier link, este seguirá funcionando, pero si no, simplemente se cerrará el menú.

function open() {
  $('.downUp').next('.openClose').show();
  $('.downUp').addClass('open');
  // on añadiría el listener para siempre,
  // one hace que sólo sea hasta que se ejecute una vez
  $(document.body).one('click',close);
}

function close() {
  $('.downUp').next('.openClose').hide();
  $('.downUp').removeClass('open');
  
}

$('.downUp').click(function(e) {
  if (!$(this).hasClass('open')) {
    open();
    e.stopPropagation();
  }
  
});

//Abrimos menú en tablet
$('#imgburger').click(function() {
    if (($(window).width() <= 991)) {
        $('#smartBMH').slideToggle();
    };
});

close($('.downUp'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <ul class="ulMenuBarra">
        <li class="liMenuBarra">
            <a href="#" class="aMenuBarra downUp">SOBRE NOSOTROS</a>
            <div class="divSubMenuBarra openClose">
                <div class="container">
                    <ul class="ulSubMenuBarra">
                        <li class="col-md-2 liSubMenuBarra">
                            <a href="premios.html" class="aSubMenuBarra">
                                
                                <span class="txtSubMenuBarra">PREMIOS</span>
                            </a>
                        </li>
                        <li class="col-md-2 liSubMenuBarra">
                            <a href="asociaciones.html" class="aSubMenuBarra">
                                
                                <span class="txtSubMenuBarra">ASOCIACIONES</span>
                            </a>
                        </li>
                        <li class="col-md-2 liSubMenuBarra">
                            <a href="aviacion_regional.html" class="aSubMenuBarra">
                                <span class="txtSubMenuBarra">AVIACIÓN REGIONAL</span>
                            </a>
                        </li>
                        <li class="col-md-2 liSubMenuBarra">
                            <a href="cifras.html" class="aSubMenuBarra">
                                <span class="txtSubMenuBarra">CIFRAS</span>
                            </a>
                        </li>
                        <li class="col-md-2 liSubMenuBarra">
                            <a href="#" class="aSubMenuBarra">
                                <span class="txtSubMenuBarra">NUESTRA FLOTA </span>
                            </a>
                        </li>
                        <li class="col-md-2 liSubMenuBarra">
                            <a href="historia.html" class="aSubMenuBarra">
                                <span class="txtSubMenuBarra">HISTORIA</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </li>
    </ul>
</div>

1
  • 1
    gracias, tuve que hacer una pequeña modificación a tu código ya que sólo puse 1 elemento del menú y cuando lo abría se me abrían todas las opciones, pero ya está solucionado y me funciona correctamente
    – derek
    Commented el 9 ene. 2019 a las 10:35

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.