How to properly hide selected dropdown?
<p>I'm trying to achieve something similar to the bootstrap button drop downs (<a href="http://twitter.github.io/bootstrap/components.html#buttonDropdowns" rel="nofollow">http://twitter.github.io/bootstrap/components.html#buttonDropdowns</a>) but need something lightweight. Basic functionality is more or less this:</p>

<ul>
<li>On clicking the link, corresponding dropdown div opens (works)</li>
<li>On clicking another link, the previous dropdown closes as well as the css class is removed (works)</li>
<li>On clicking on the link of the opened dropdown, close the dropdown (does not work (closes and reopens))</li>
<li>On clicking anywhere in the body (so outside the link and dropdown), close the dropdown (does not work)</li>
</ul>

<p>What should be the logic behind this?</p>

<p><strong>Demo:</strong> <a href="http://jsfiddle.net/fU2BZ/" rel="nofollow">http://jsfiddle.net/fU2BZ/</a></p>

<p>Does the code below make sense?</p>

<pre><code>$(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);
});
</code></pre>
