El otro día de encontraba con un compañero de trabajo que estaba batallando para manipular un evento en un dropdown menú que habia hecho,
y el problema era que quería que una vez que le daba click en el menú y se expadía al hacer click fuera de este elemento este se volviera
a colapsar. Hay muchos lugares que presentaban un solución aparente pero aqui muestro un código que puede funcionar para muchos casos.
| 1 2 3 4 5 6 7 8 | $('html').click(function() { /* Aqui se esconden los menus que esten visibles*/ }); $('#dropList').click(function(e){ /* Mostrar nuestro menú*/ e.stopPropagation(); }); |
El código es muy simple pero la magía que hace jQuery es genial. Si se le da click en un html cualquiera se va a esconder el menú, así que para evitar esto
en nuestro elemento detenemos esta acción con stopPropagation(). Aquí lo que estamos haciendo en realidad es que estamos manipulando eventos.
El primer evento que sucede es el click de nuestro selector ‘html’, entonces si le damos click en ‘#dropList’ el primer evento en responder es el de mayor jeraquía que es ‘html’, entonces se corre el metodo de esconder el menú.
En el segundo evento si le damos click en ‘#dropList’ se va a esconder aunque este no se encuentre visible y para indicarle que este elemento es el que queremos usar, detenemos la ejecución de eventos padre con stopPropagation() y ejecutamos el de nuestro elemento ‘#dropList’.
No hay mucha ciencia pero si se desea mas informacrion de stopPropagation() pueden consultarla aquí. 😀