title: How to hide Twitter Bootstrap dropdown
body: <p>This is getting annoying — when I click on an item in a Bootstrap dropdown, the dropdown doesn't close. I have it set up to open a Facebox lightbox when you click the dropdown item but there is a problem with it.</p>
  <p><img src="https://i.stack.imgur.com/fWZyY.png" alt="enter image description here" /></p>
  <hr />
  <h2><em>What I have tried</em></h2>
  <p>When the item is clicked, I tried doing this:</p>
  <pre><code>    $('.dropdown.open').removeClass('open');
      $('.dropdown-menu').hide();
  </code></pre>
  <p>That hides it, but then for some reason it won't open again.</p>
  <p>As you can see I really need the dropdown to close, because it looks crappy when it stays open (mainly because the <code>z-index</code> of the dropdown is higher than the Facebox modal box overlay.</p>
  <hr />
  <h2><em>Why I'm not using Bootstrap's built-in modal box</em></h2>
  <p>If you're wondering why I'm not using the nice-looking modal box <em>built into Bootstrap</em>, it is because:</p>
  <ol>
  <li>It doesn't have a way to load content into it with AJAX.</li>
  <li>You have to type HTML each time for the modal; with Facebox you can do a simple: <code>$.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&amp;id=1234567'});</code></li>
  <li>It uses CSS3 animations to animate (which looks very nice) but in non-CSS3 browsers it just shows, which doesn't look that nice; Facebox uses JavaScript to fade in so it works in all browsers.</li>
  </ol>