ocultar menú al pulsar fuera de él

dryant · #1 (**permalink**) 24/04/2015, 11:25

Hola a todos!
Tengo este codigo

Código:

<script type="text/javascript">
	function toggleMobileMenu(){
		var $mobileMenu = $('#mobile-main-menu');
		$mobileMenu.slideToggle('fast');
	}

	$(document).ready(function() {
		$('#mobile-main-button').on('click', toggleMobileMenu);
	});

</script>

el cual me abre un menú al pulsar sobre el botón #mobile-main-button.
El caso es que el menú se queda abierto a no ser que vuelva a pulsar sobre el mismo botón, y yo necesito que se cierre también si pulso en cualquier otra parte fuera del menú y del botón.

¿Como lo hago?

Gracias!

Alexis88 · #2 (**permalink**) 24/04/2015, 14:37

Aplica el evento click en el documento para ejecutar la función que oculte al menú y utiliza el selector CSS :not para excluir al menú y al botón.

Código Javascript:

Ver original$("*:not(#mobile-main-menu, #mobile-main-button)").on("click", function(){
    if ($("#mobile-main-menu").is(":visible")){
        $("#mobile-main-menu").slideUp();
    }
});

De esta manera, cuando des un clic en cualquier parte que no sea el menú ni el botón y solo si el menú es visible, se ocultará.

Saludos

dryant · #3 (**permalink**) 25/04/2015, 02:18

Cita:

Iniciado por Alexis88

Aplica el evento click en el documento para ejecutar la función que oculte al menú y utiliza el selector CSS :not para excluir al menú y al botón.

Código Javascript:

Ver original$("*:not(#mobile-main-menu, #mobile-main-button)").on("click", function(){
    if ($("#mobile-main-menu").is(":visible")){
        $("#mobile-main-menu").slideUp();
    }
});

De esta manera, cuando des un clic en cualquier parte que no sea el menú ni el botón y solo si el menú es visible, se ocultará.

Saludos

Hola Gracias por tu respuesta.

He modificado el codigo quedando así:

Código:

<!-- Script menú desplegable -->
<script type="text/javascript">
	function toggleMobileMenu(){
		var $mobileMenu = $('#mobile-main-menu');
		$mobileMenu.slideToggle('fast');
	}

	$(document).ready(function() {
		$('#mobile-main-button').on('click', toggleMobileMenu);
	});

	$("*:not(#mobile-main-menu, #mobile-main-button)").on("click", function(){
	    if ($("#mobile-main-menu").is(":visible")){
	        $("#mobile-main-menu").slideUp();
	    }
	});
</script>

pero ahora cuando pulso el boton, se abre el menu, y con la misma se vuelve a cerrar en plan yoyo.

Porque pasa esto?

Gracias!

Alexis88 · #4 (**permalink**) 25/04/2015, 02:29

Olvidé decírtelo. Debes de detener la propagación del evento click luego de pulsar el botón, así no se activará la función que te mostré.

Código Javascript:

Ver original$("*:not(#mobile-main-menu, #mobile-main-button)").on("click", function(){
    if ($("#mobile-main-menu").is(":visible")){
        $("#mobile-main-menu").slideUp();
    }
});
 
$("#mobile-main-button").on("click", function(event){
    $("#mobile-main-menu").slideToggle();
    event.stopImmediatePropagation(); //Detengo la inmediata propagación del evento
});

DEMO

Saludos

dryant · #5 (**permalink**) 25/04/2015, 04:02

Hola Alexis.

No lo entiendo, pero sigue sin funcionar... ahora funciona como al principio: solo cierra y abre si le doy al boton.
No lo entiendo porque en el demo que me has enviado, funciona perfectamente....

Todo le codigo javascript que tengo es este:

Código:

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

<!-- Script menú desplegable -->
<script type="text/javascript">
	
$("*:not(#mobile-main-menu, #mobile-main-button)").on("click", function(){
    if ($("#mobile-main-menu").is(":visible")){
	    $("#mobile-main-menu").slideUp();
    }
});

$("#mobile-main-button").on("click", function(event){
    $("#mobile-main-menu").slideToggle();
    event.stopImmediatePropagation();
});
	
</script>

<!-- Google Analytics -->
<!-- Google Webasters Tools -->

no tengo mas codigo javascript por ningún otro lado...

Gracias!

PHPeros · #6 (**permalink**) 25/04/2015, 04:57

Falta un pequeño detalle:

Al igual que el botón, también se debe detener el bubbling del div, ya que ambos se encuentran sobre el mismo nivel del DOM:

Código Javascript:

Ver original$("#mobile-main-menu").on("click", function(event){
  event.stopPropagation();                                 
});

Símplemente añade eso

dryant · #7 (**permalink**) 25/04/2015, 07:06

Ahora si!!

Pero ahora hay otr cosa que falla :(

Dentro del mobile-main-menu hay un dropdown de bootstrap que se desplegaba al hacer clic en él, y ahora al hacer clic en el dropdown se cierra todo.

este es el codigo del script:

Código:

<script type="text/javascript">
	
	$("#mobile-main-menu").on("click", function(event){
	  event.stopPropagation();                                 
	}); 

	$("*:not(#mobile-main-menu, #mobile-main-button)").on("click", function(){
    if ($("#mobile-main-menu").is(":visible")){
	    $("#mobile-main-menu").slideUp();
    }
	});

	$("#mobile-main-button").on("click", function(event){
	    $("#mobile-main-menu").slideToggle();
	    event.stopImmediatePropagation();
	});



	
</script>

y este el codigo del menu completo:

Código:

<div class="col-xs-12 visible-xs">
			<a href="#" id="mobile-main-button" class="btn btn-default visible-xs">Secciones</a>
		</div>
	 	<div class="col-xs-12 visible-xs">
		 	<ul id="mobile-main-menu">
			  <li role="presentation"><a href="categoria.php">Dinero</a></li>
			  <li role="presentation"><a href="categoria.php">Salud</a></li>
			  <li role="presentation"><a href="categoria.php">Formación</a></li>
			  <li role="presentation"><a href="categoria.php">Tecnología</a></li>
			  <li role="presentation"><a href="categoria.php">Finanzas</a></li>
			  <li role="presentation"><a href="categoria.php">Negocios</a></li>
			  <li role="presentation"><a href="categoria.php">Política</a></li>
			  <li role="presentation"><a href="categoria.php">Deportes</a></li>
			  <li role="presentation" class="dropdown">
			  	<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
			      Mas<span class="caret"></span>
			    </a>
			    <ul class="dropdown-menu" role="menu">
			      <li role="presentation"><a href="#">Categoria x</a></li>
			      <li role="presentation"><a href="#">Categoria x</a></li>
			      <li role="presentation"><a href="#">Categoria x</a></li>
			      <li role="presentation"><a href="#">Categoria x</a></li>
			      <li role="presentation"><a href="#">Categoria x</a></li>
			      <li role="presentation"><a href="#">Categoria x</a></li>
			      <li role="presentation"><a href="#">Categoria x</a></li>
			      <li role="presentation"><a href="#">Categoria x</a></li>
			      <li role="presentation"><a href="#">Categoria x</a></li>
			      <li role="presentation"><a href="#">Categoria x</a></li>
			    </ul>
			  </li>
			</ul>
	 	</div>

Lo que necesito es:
- si esta desplegado el dropdown y pulso fuera se cierra todo
- si no esta desplegado el dropdown y pulso fuera se cierra el menu
- si no esta desplegado el dropdown y pulso en "Mas" se despliega el dropdown (ahora mismo con lo tengo al pulsar en "mas", se cierra el menu, en vez de expandirse

Saludos y gracias!!

Alexis88 · #8 (**permalink**) 25/04/2015, 10:31

Buenos días.

En la madrugada no me había percatado del detalle anterior, pero ahora que explicas esta nueva complicación, puedes aplicar lo mismo, es decir, que ese 'Más' sea un botón o un span, le aplicarías un evento y función y detendrías la propagación del evento.

Saludos

dryant · #9 (**permalink**) 25/04/2015, 13:57

Hola de nuevo Alexis.

He hecho lo siguiente:
El boton "Mas" que era un <a> lo he encerrado en un sapn al cual le he dado el id="moreSections".

Luego en el javascript he añadido esto:
$("#moreSections").on("click", function(event){
event.stopPropagation();
event.stopImmediatePropagation();
});
Pero no funciona, ya que en el momento que pulso en "mas" se cierra el menú

Que es lo que tengo que hacer?

Gracias!

Alexis88 · #10 (**permalink**) 25/04/2015, 14:14

Si el 'Más' ya estaba dentro de un elemento, en este caso, un enlace, no era necesario que lo incluyas dentro de otro. Prueba asignándole ese id al enlace y ejecuta la función, pero solo usa stopImmediatePropagation o stopPropagation (diferencia entre uno y otro), no ambas a la vez y debe de ir en la función que se ejecuta al pulsar dicho enlace.

Saludos

dryant · #11 (**permalink**) 25/04/2015, 14:40

Nada..... que no hay forma

Mi codigo javascript:

Código:

<script type="text/javascript">
	
	$("#mobile-main-menu").on("click", function(event){
	  event.stopPropagation();                                 
	}); 

	$("*:not(#mobile-main-menu, #mobile-main-button)").on("click", function(){
    if ($("#mobile-main-menu").is(":visible")){
	    $("#mobile-main-menu").slideUp();
    }
	});

	$("#mobile-main-button").on("click", function(event){
	    $("#mobile-main-menu").slideToggle();
	    event.stopImmediatePropagation();
	});
	
	$("#moreSections").on("click", function(event){
		event.stopImmediatePropagation();
	});
	
</script>

He probado tambien con event.stopImmediatePropagation();

y mi codigo html:

Código:

<div class="col-xs-12 visible-xs">
		 	<ul id="mobile-main-menu">
			  <li role="presentation"><a href="categoria.php">Dinero</a></li>
			  <li role="presentation"><a href="categoria.php">Salud</a></li>
			  <li role="presentation"><a href="categoria.php">Formación</a></li>
			  <li role="presentation"><a href="categoria.php">Tecnología</a></li>
			  <li role="presentation"><a href="categoria.php">Finanzas</a></li>
			  <li role="presentation"><a href="categoria.php">Negocios</a></li>
			  <li role="presentation"><a href="categoria.php">Política</a></li>
			  <li role="presentation"><a href="categoria.php">Deportes</a></li>
			  <li role="presentation" class="dropdown">
			  	<a class="dropdown-toggle" id="moreSections" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
			      Mas<span class="caret"></span>
			    </a>
			    <ul class="dropdown-menu" role="menu">
			      <li role="presentation"><a href="#">Categoria x</a></li>
			      <li role="presentation"><a href="#">Categoria x</a></li>
			      <li role="presentation"><a href="#">Categoria x</a></li>
			      <li role="presentation"><a href="#">Categoria x</a></li>
			      <li role="presentation"><a href="#">Categoria x</a></li>
			      <li role="presentation"><a href="#">Categoria x</a></li>
			      <li role="presentation"><a href="#">Categoria x</a></li>
			      <li role="presentation"><a href="#">Categoria x</a></li>
			      <li role="presentation"><a href="#">Categoria x</a></li>
			      <li role="presentation"><a href="#">Categoria x</a></li>
			    </ul>
			  </li>
			</ul>
	 	</div>

y sigue funcionando mal...

Sabes porque?

Gracias por la paciencia...

Alexis88 · #12 (**permalink**) 25/04/2015, 14:51

¿Podrías mostrarnos el código que ejecuta el enlace 'Más' con el que dices que despliegas una lista?

dryant · #13 (**permalink**) 25/04/2015, 15:00

Es el que viene en Bootstrap.
Creo que es este:

Código:

/* ========================================================================
 * Bootstrap: dropdown.js v3.3.4
 * http://getbootstrap.com/javascript/#dropdowns
 * ========================================================================
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * ======================================================================== */


+function ($) {
  'use strict';

  // DROPDOWN CLASS DEFINITION
  // =========================

  var backdrop = '.dropdown-backdrop'
  var toggle   = '[data-toggle="dropdown"]'
  var Dropdown = function (element) {
    $(element).on('click.bs.dropdown', this.toggle)
  }

  Dropdown.VERSION = '3.3.4'

  Dropdown.prototype.toggle = function (e) {
    var $this = $(this)

    if ($this.is('.disabled, :disabled')) return

    var $parent  = getParent($this)
    var isActive = $parent.hasClass('open')

    clearMenus()

    if (!isActive) {
      if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
        // if mobile we use a backdrop because click events don't delegate
        $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
      }

      var relatedTarget = { relatedTarget: this }
      $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))

      if (e.isDefaultPrevented()) return

      $this
        .trigger('focus')
        .attr('aria-expanded', 'true')

      $parent
        .toggleClass('open')
        .trigger('shown.bs.dropdown', relatedTarget)
    }

    return false
  }

  Dropdown.prototype.keydown = function (e) {
    if (!/(38|40|27|32)/.test(e.which) || /input|textarea/i.test(e.target.tagName)) return

    var $this = $(this)

    e.preventDefault()
    e.stopPropagation()

    if ($this.is('.disabled, :disabled')) return

    var $parent  = getParent($this)
    var isActive = $parent.hasClass('open')

    if ((!isActive && e.which != 27) || (isActive && e.which == 27)) {
      if (e.which == 27) $parent.find(toggle).trigger('focus')
      return $this.trigger('click')
    }

    var desc = ' li:not(.disabled):visible a'
    var $items = $parent.find('[role="menu"]' + desc + ', [role="listbox"]' + desc)

    if (!$items.length) return

    var index = $items.index(e.target)

    if (e.which == 38 && index > 0)                 index--                        // up
    if (e.which == 40 && index < $items.length - 1) index++                        // down
    if (!~index)                                      index = 0

    $items.eq(index).trigger('focus')
  }

  function clearMenus(e) {
    if (e && e.which === 3) return
    $(backdrop).remove()
    $(toggle).each(function () {
      var $this         = $(this)
      var $parent       = getParent($this)
      var relatedTarget = { relatedTarget: this }

      if (!$parent.hasClass('open')) return

      $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))

      if (e.isDefaultPrevented()) return

      $this.attr('aria-expanded', 'false')
      $parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget)
    })
  }

  function getParent($this) {
    var selector = $this.attr('data-target')

    if (!selector) {
      selector = $this.attr('href')
      selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
    }

    var $parent = selector && $(selector)

    return $parent && $parent.length ? $parent : $this.parent()
  }


  // DROPDOWN PLUGIN DEFINITION
  // ==========================

  function Plugin(option) {
    return this.each(function () {
      var $this = $(this)
      var data  = $this.data('bs.dropdown')

      if (!data) $this.data('bs.dropdown', (data = new Dropdown(this)))
      if (typeof option == 'string') data[option].call($this)
    })
  }

  var old = $.fn.dropdown

  $.fn.dropdown             = Plugin
  $.fn.dropdown.Constructor = Dropdown


  // DROPDOWN NO CONFLICT
  // ====================

  $.fn.dropdown.noConflict = function () {
    $.fn.dropdown = old
    return this
  }


  // APPLY TO STANDARD DROPDOWN ELEMENTS
  // ===================================

  $(document)
    .on('click.bs.dropdown.data-api', clearMenus)
    .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
    .on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
    .on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
    .on('keydown.bs.dropdown.data-api', '[role="menu"]', Dropdown.prototype.keydown)
    .on('keydown.bs.dropdown.data-api', '[role="listbox"]', Dropdown.prototype.keydown)

}(jQuery);

/* ========================================================================
 * Bootstrap: modal.js v3.3.4
 * http://getbootstrap.com/javascript/#modals
 * ========================================================================
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * ======================================================================== */


+function ($) {
  'use strict';

Alexhg42 · #14 (**permalink**) 04/05/2015, 01:09

yo tenia esa necesidad, cree un menu que aparece al pulsarse un boton y desapareciera cuando se pulsara fuera de el. hacerlo aparecer era facil, para desaparecer tuve que pensar un poco mas. lo que hice fue crear un div invisible que abarcara toda la pantalla de forma flotante al igual que mi menu (el menu abarcaba la mitad de la pantalla) y dentro de este div invisible estaba el menu, el chiste fue que al aparecer el menu, tambien lo hacia el div, como el menu estaba arriba del div podia pulsarlo sin problema y cuando no se presionaba el menu, se tenia que presionar el div (este tenia propiedades z-index) y con javascript y on('click... le agregue la funcion de ocultar elmmenu y el div

NueveReinas · #15 (**permalink**) 04/05/2015, 07:28

Cita:

Iniciado por Alexhg42

yo tenia esa necesidad, cree un menu que aparece al pulsarse un boton y desapareciera cuando se pulsara fuera de el. hacerlo aparecer era facil, para desaparecer tuve que pensar un poco mas. lo que hice fue crear un div invisible que abarcara toda la pantalla de forma flotante al igual que mi menu (el menu abarcaba la mitad de la pantalla) y dentro de este div invisible estaba el menu, el chiste fue que al aparecer el menu, tambien lo hacia el div, como el menu estaba arriba del div podia pulsarlo sin problema y cuando no se presionaba el menu, se tenia que presionar el div (este tenia propiedades z-index) y con javascript y on('click... le agregue la funcion de ocultar elmmenu y el div

Muy bien planteado

Alexis88 · #16 (**permalink**) 04/05/2015, 13:33

La solución de Alexhg42 es muy útil para trabajar con ventanas modales, pero, ¿qué pasaría si el usuario quiere pulsar algún otro elemento que está fuera del menú, por ejemplo, un enlace o un botón? Si se utilizara el <div> invisible, tendría que dar dos clics; uno para cerrar el menú (y para ocultar al <div> de fondo) y otro para pulsar al elemento en cuestión.

Alexhg42 · #17 (**permalink**) 08/05/2015, 16:14

de hecho no especifique, pero era un menu al estilo de facebook de celular, recorria la pagina completa para mostrar el menu. la otra es que con javascript se le agregara, a los demas elememtos en la pagina, a menos que fuera un link) la propiedad de ocultar el menu solo cuando el menu este activado, y eso se arregla con un if. saludos.

Alexis88 · #18 (**permalink**) 08/05/2015, 22:49

Para lo último que mencionas, no es necesario agregar nada a los elementos, basta con delegar el evento click a la ventana, tomar al elemento afectado con la propiedad target del objeto del evento y verificar que el menú esté visible y que el elemento afectado no sea este.

Saludos