Problem when navbar is collapsed

[aes59]

In dropdown menus within a navbar that is collapsed for which data-hover=dropdown, when I click on the dropdown menu it drops down ok, but then when I move cursor over the "dropdowned" menu, it disappears within the data-delay timeout. I think what is happening is that it detects that the cursor has moved out of the triggering dropdown (and when the cursor is over the dropdowned menu it is also happens to hover over another "top level" menu item), so it collapses its child. But it should not collapse it in this case, because the cursor is over a child. Happens whether or not data-close-others="false"

[aes59]

Sorry, was a little imprecise. By "within a navbar that is collapsed", I meant: Within a navbar that has been opened as a "stacked list as result of clicking on the button that has replaced the navbar because the window is narrow enough to trigger the navbar collapse. Ex. code:

Test case

  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar" >
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>                        
  </button>
</div>
<div class="collapse navbar-collapse" id="myNavbar" >
 <ul class="nav nav-pills nav-justified" >
    <li class="active"><a href="#">Home</a></li>
    <li><a href="one.html">Item 1</a></li>
    <li><a href="two.html">Item 2</a></li>
    <li><a href="three" target="_blank">Item 3</a></li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="300" href="">Item 4
      <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="five.html" target="_blank" >Item 5</a></li>
      </ul>
    </li>    
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="300" href="six.html">Item 6
      <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="seven.html" target="_blank">Item 7</a></li>
        <li><a href="eight.html" target="_blank">Item 8</a></li>
        <li><a href="nine.html" target="_blank">Item 9</a></li>
      </ul>
    </li>    
  </ul>
</div>

[aes59]

Update: Note that this is only a problem for non-touch screens where hover is possible, but browser window is nevertheless narrow enough to trigger a collapse of the navbar.
I fixed it by "wrapping" lines 61, 62, and 63 with a test for non-visibility of the navbar-toggle. Thus, if the navbar-toggle IS visible (navbar is collapsed), the hover event will NOT close the menu. I am a novice Jquery programmer and do not thoroughly understand all the code of this plugin, so I'm not sure this is 100% correct, but testing seems to show it works without causing other problems. Here are the affected lines of code:

if (!($this.parents(".navbar").find(".navbar-toggle").is(":visible"))) { // AES59
                    $this.attr('aria-expanded', 'false');
                    $parent.removeClass('open');
                    $this.trigger(hideEvent);
                } // AES59

[groe]

I've had the same problem. I have also fixed it on my side by checking if .navbar-toggle is :visible. If it is, I don't activate dropdownHover at all.

To handle cases such as someone resizing their browser it would be nice to have some way to disable dropdownHover again once it has been enabled, such as .dropdownHover("destroy")

[ivansammartino]

me too, and since an image (ops... a code!) is worth a thousand words, here is a fiddle that shows the problem: http://www.codeply.com/go/GQsnKuiNXB

Select the smartphone viewport width (smartphone icon bottom right), open the dropdown menu and then go to "About" or "Contact" item: the dropdown disappears