javascript - How to properly hide selected dropdown? -
i'm trying achieve similar bootstrap button drop downs (http://twitter.github.io/bootstrap/components.html#buttondropdowns) need lightweight. basic functionality more or less this:
- on clicking link, corresponding dropdown div opens (works)
- on clicking link, previous dropdown closes css class removed (works)
- on clicking on link of opened dropdown, close dropdown (does not work (closes , reopens))
- on clicking anywhere in body (so outside link , dropdown), close dropdown (does not work)
what should logic behind this?
demo: http://jsfiddle.net/fu2bz/
does code below make sense?
$(document).click( function(){ $('.dropdownbox').hide(0); $('.dropdown').removeclass('active'); }); $('.dropdown').click( function(event){ event.stoppropagation(); $('.dropdown').removeclass('active'); $('.dropdownbox').hide(); $(this).addclass('active').find('.dropdownbox').slidetoggle(200); });
made changes code, added if else logic, seems work.
fiddle: http://jsfiddle.net/fu2bz/1/
code:
$('.dropdown').click( function(event){ event.stoppropagation(); if ($(this).hasclass("active")) { $('.dropdown').removeclass('active'); $('.dropdownbox').hide(); } else { $('.dropdownbox').hide(); $(this).addclass('active').find('.dropdownbox').slidetoggle(200); } });
Comments
Post a Comment