Как исправить мерцание меню в bootstrap при использовании hover эффекта и javascript?

Question

[Едуард В.]

Здравствуйте.
Искал способ реализации выпадающего меню с 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' );
        }
     });
});

Проблемма в том, что при клике по пункту меню или по самому выпадающему блоку он, блок, мерцает.
Выложил пример - jsfiddle.net/V_E_Y/85qan7qt/20
Не подскажите, в чем может быть причина, как решить эту проблему?
Спасибо.

Answer 1

[asdz]

По быстрому: убрать ваш js и добавить

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

Comments

[Едуард В.]

Спасибо.
Можно даже использовать как альтернативу.

[asdz]

Минус в том, что к контейнеру не добавляется класс open, благодаря которому выделенный элемент затемняется. Это тоже через css можно добавить.

[Едуард В.]

asdz: Ну с css уже проще работать.
Почему то даже не подумал решить с помощью css.