mrplainswalker mrplainswalker - 1 year ago 96
Javascript Question

How to close a bootstrap dropdown menu with jquery?

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:

<div class="btn-group" id="openItems">
<button class="btn btn-custom-top dropdown-toggle" data-toggle="dropdown"><span class="caption"></span><span class="caret"></span></button>
<ul class="dropdown-menu" id="openItemDropdown">

After moving the mouse out of the menu, I'd like it to close. I almost have it working but not quite.

$(document).ready(function ()
$('.dropdown-menu').mouseleave(function ()


The problem with this is that it toggles all of the dropdowns on the page. I've tried checking
but it always returns false. I suspect this is because
is actually the .dropdown-menu node rather than the
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.

Answer Source

just add a custom fake class along with dropdown-toggle. for example:

<div class="btn-group" id="openItems">
  <button class="btn btn-custom-top myFakeClass dropdown-toggle" data-toggle="dropdown">
    <span class="caption"></span>
    <span class="caret"></span>
  <ul class="dropdown-menu" id="openItemDropdown"></ul>

then use that as a selector in the script :

$(document).ready(function () {
  $('.dropdown-menu').mouseleave(function () {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download