Мерцание меню в Bootstrap при использовании hover эффекта и JavaScript

Искал способ реализации выпадающего меню с hover эффектом в Bootstrap 3.

Нашел вот такое решение:

$( 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' );
        }
     });
});

Проблема в том, что при клике по пункту меню выпадающий блок пунктов мерцает.
Не подскажите, в чем может быть причина?

Выложил пример - http://jsfiddle.net/V_E_Y/85qan7qt/15/

Нашел еще такое решение, не мерцает, но при этом способе блок подпунктов не скрывается после отведения курсора:

$('.dropdown').mouseenter(function(){
if(!$('.navbar-toggle').is(':visible')) { // disable for mobile view
    if(!$(this).hasClass('open')) { // Keeps it open when hover it again
        $('.dropdown-toggle', this).trigger('click');
    }
  }
 });