Cerrar el menú haciendo clic en el menú en sí mismo

No soy el mejor cuando se trata de JavaScript, y me quedé con la búsqueda de una solución. He visto preguntas similares formuladas aquí, pero cuando trato de implementarlas en mi caso, rompe el menú o simplemente no hace ninguna diferencia.

Estoy tratando de obtener un menú (que se abre con un clic), para cerrar no solo con un clic repetido en la pestaña del menú principal, sino también con un clic fuera del menú, es decir, en cualquier lugar.

Mi codigo es:

var toggleUpdatesPulldown = function(event, element, user_id) {
    if( element.className=='updates_pulldown' ) {
        element.className= 'updates_pulldown_active';
        showNotifications();
    } else {
        element.className='updates_pulldown';
    }
}

Este fragmento está en medio de mucho más JavaScript y esta es la versión de trabajo predeterminada. El clic del usuario cambia el nombre de la clase del contenedor del menú, lo que determina si se muestra o no. Desde otra publicación aquí, intenté implementar lo siguiente en vano para intentar y permitir que el clic fuera también alterara el nombre de la clase:

var toggleUpdatesPulldown = function(event, element, user_id) {
    if( element.className=='updates_pulldown' ) {
        element.className= 'updates_pulldown_active';
        showNotifications();
    } else {
        element.className='updates_pulldown';
    }

    ev.stopPropagation();

    $(document).one('click', function() {
        element.className='updates_pulldown';
    });
} 

¿Algún consejo para abordar esto? Me gustaría aprender más JavaScript, ya que parece que estoy trabajando con él cada vez más.

preguntado el 30 de junio de 12 a las 16:06

¡Bienvenidos! Por favor haga una demostración funcional en jsfiddle.net -

En caso de que no lo hayas notado... tienes $(document).one('click'... eso debería estar activado, no uno. -

Si realmente estuviera buscando usar jQuery, podría usar $.mouseleave() para manejar la apertura/cierre. -

@BobDavies - Hay un $.one() que dispara solo una vez por elemento. -

Ahh, no sabía eso, gracias @JaredFarrish :) -

1 Respuestas

Espero que todavía estés buscando una solución. Aquí hay una demostración de trabajo de esto http://jsfiddle.net/sU9ZJ/6/

(function(win, doc) {
  var lis = $('#menu>ul>li>a').on('click', function(e) {
    e.preventDefault();
    var a = $(this);
    var li = $(this).parent();
    function close(dev) {
      if (!(dev && li.has(dev.target)[0])) {
        li.addClass('inactive').removeClass('active');
        doc.off('click', close);
        a.trigger('close');
      }
    }
    function open(dev) {
      li.addClass('active');
      doc.on('click', close);
      a.trigger('open');
    }
    if (li.hasClass('active')) {  close() } 
    else {  open(); }        
  })      
})(this, $(document))

También he agregado un par de eventos que puedes usar cuando se abre o se cierra.

$('#menu>ul>li>a').on('open', function(e) { 
     console.log('menu open', this) 
}).on('close', function(e) { 
      console.log('menu closed', this) 
})

Lo siento, esto depende de jQuery. demasiado perezoso para escribir una versión nativa :). Además, esto no está probado en IE, pero no debería ser demasiado difícil hacerlo funcionar en aquellos si no es así.

Respondido 05 Jul 12, 04:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.