How to fix menu flickering in bootstrap when using hover effect and javascript?

Question

JavaScript

Hello.
I was looking for a way to implement a dropdown menu with hover effect in bootstrap 3.
I found this solution:

$( document ).ready(function() {
      $( 'ul.nav li.dropdown' ).hover(function() {
         // $( window ).width() >= 768
        if ($('.navbar-toggle').css('display') === 'none' 
            && false === ('ontouchstart' in document)) {

            $( '.dropdown-toggle', this ).trigger( 'click' );
        }
      }, function() {
        if ($('.navbar-toggle').css('display') === 'none'
            && false === ('ontouchstart' in document)) {

            $( '.dropdown-toggle', this ).trigger( 'click' );
        }
     });
});

The problem is that when you click on a menu item or on the drop-down block itself, it, the block, flickers.
I posted an example - jsfiddle.net/V_E_Y/85qan7qt/20
​​Do not tell me what could be the reason, how to solve this problem?
Thank you.

Answer 1

Quick: remove your js and add

ul.nav li.dropdown:hover > .dropdown-menu {
    display: block;    
}