Close Bootstrap navbar dropdown on mouse out is bad on small devices
<p>I have a Bootstrap navbar with one (or more) dropdown(s). I want to hide an open dropdown on mouse out, and so far so good with this very simple script that removes the "open" class:</p>

<pre><code>var nav = $(".nav");
nav.children("li").hover(function(){
    console.log("mouse over");
}, function(){
    console.log("mouse out");
    $(this).removeClass("open");
});
</code></pre>

<p>Here comes two problems:</p>

<ol>
<li>Even on small devices, where navbar is collapsed, open dropdown(s) suddenly close on mouse out 'cause of the previous script: this is obvious but it's not a nice behavior... so I try to leverage the </li>
<li><code>hide.bs.dropdown</code> event, like this: <code>nav.trigger("hide.bs.dropdown");</code> but it doesn't work at all, and have no idea why...</li>
</ol>

<p>Here's a <a href="http://www.bootply.com/P2ADmOyx2V" rel="nofollow">Bootply fiddle</a> (you can see wrong behavior #1 at small resolutions clicking on the smartphone icon on top right)</p>

<p>So, how can I make it work? I could wrap the script into a <code>if ($(window).width() &gt; [my breakpoint here])</code> statement, but I'd prefer not to rely on hardcoded brekpoints and go straight with what's yet in Bootstrap...</p>

<p>Thank you</p>