title: How to close a bootstrap dropdown menu with jquery?
body: <p>Alright, I asked a question yesterday that turned out to be completely off base.  I think I'm on more solid ground now but still having an issue.  I have a bootstrap dropdown menu in a button group as follows:</p>
  
  <pre><code>&lt;div class="btn-group" id="openItems"&gt;
      &lt;button class="btn btn-custom-top dropdown-toggle" data-toggle="dropdown"&gt;&lt;span class="caption"&gt;&lt;/span&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
      &lt;ul class="dropdown-menu" id="openItemDropdown"&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>After moving the mouse out of the menu, I'd like it to close.  I almost have it working but not quite.</p>
  
  <pre><code>$(document).ready(function ()
  {
      $('.dropdown-menu').mouseleave(function ()
      {
  
          $(".dropdown-toggle").dropdown('toggle');
      });
  });
  </code></pre>
  
  <p>The problem with this is that it toggles all of the dropdowns on the page.  I've tried checking <code>.hasClass('active')</code> on <code>$(this)</code> but it always returns false.  I suspect this is because <code>$(this)</code> is actually the .dropdown-menu node rather than the <code>.dropdown-toggle</code> node.  However, traversing the nodes is tricky and doesn't seem to work across all browsers.  There has GOT to be a way to just always close the lists rather than toggling them.</p>