Раскрывающийся список Bootstrap с наведением

хорошо, так что мне нужно довольно просто.

Я установил navbar с некоторыми раскрывающимися меню в нем (используя class="dropdown-toggle" data-toggle="dropdown"), и она отлично работает.

дело в том, что это работает "onClick", в то время как я предпочел бы, чтобы это сработало "onHover".

есть ли встроенный способ сделать это?

148
css html javascript jquery twitter-bootstrap

17 ответов

самым простым решением будет CSS. Добавьте что-нибудь вроде этого...

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; // remove the gap so it doesn't close
 }

Рабочая Скрипку

280

лучший способ сделать это - просто вызвать событие щелчка загрузки с наведением. Таким образом, он должен по-прежнему оставаться сенсорным устройством 

$('.dropdown').hover(function(){ 
  $('.dropdown-toggle', this).trigger('click'); 
});
64

вы можете использовать функцию наведения jQuery.

вам просто нужно добавить класс open когда мышь входит и удаляет класс, когда мышь выходит из раскрывающегося списка.

вот мой код:

$(function(){
    $('.dropdown').hover(function() {
        $(this).addClass('open');
    },
    function() {
        $(this).removeClass('open');
    });
});
51

простой способ, используя jQuery, заключается в следующем:

$(document).ready(function(){
    $('ul.nav li.dropdown').hover(function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
    }, function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
    });  
});
23

для CSS, он сходит с ума, когда вы щелкните по нему. Это код, который я использую, он также ничего не меняет для мобильного просмотра.

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

В Twitter Bootstrap не реализован но вы можете использовать плагин

обновление 1:

вопрос же здесь

6

наведите курсор на элементы навигации, чтобы увидеть, что они активируются при наведении. http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#

6

Так у вас есть этот код:

<a class="dropdown-toggle" data-toggle="dropdown">Show menu</a>

<ul class="dropdown-menu" role="menu">
    <li>Link 1</li>
    <li>Link 2</li> 
    <li>Link 3</li>                                             
</ul>

обычно он работает на событии click, и вы хотите, чтобы он работал на событии hover. Это очень просто, просто используйте этот код javascript/jquery:

$(document).ready(function () {
    $('.dropdown-toggle').mouseover(function() {
        $('.dropdown-menu').show();
    })

    $('.dropdown-toggle').mouseout(function() {
        t = setTimeout(function() {
            $('.dropdown-menu').hide();
        }, 100);

        $('.dropdown-menu').on('mouseenter', function() {
            $('.dropdown-menu').show();
            clearTimeout(t);
        }).on('mouseleave', function() {
            $('.dropdown-menu').hide();
        })
    })
})

это работает очень хорошо, и вот объяснение: у нас есть кнопка и меню. При наведении на кнопку мы показываем меню, и когда мы mouseout кнопки мы скрываем меню после 100ms. Если вам интересно, почему я использую это, потому что вам нужно время, чтобы перетащить курсор с кнопки над меню. Когда вы находитесь в меню, время сбрасывается, и вы можете оставаться там столько времени, сколько хотите. Когда вы выйдете из меню, мы скроем меню мгновенно без тайм-аута.

я использовал этот код во многих проектах, если у вас возникнут проблемы с использованием его, не стесняйтесь задавать мне вопросы.

4

Это то, что я использую, чтобы сделать его выпадающим при наведении с помощью jQuery

$(document).ready(function () {
    $('.navbar-default .navbar-nav > li.dropdown').hover(function () {
        $('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
        $(this).addClass('open');
    }, function () {
        $('ul.dropdown-menu', this).stop(true, true).slideUp('fast');
        $(this).removeClass('open');
    });
});
3

попробуйте это с помощью функции наведения с fadeIn fadeout анимации

$('ul.nav li.dropdown').hover(function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
3

Это только витает навигации, когда вы находитесь не на мобильном устройстве, потому что я считаю, что при наведении не работает навигация на мобильных устройств:

    $( document ).ready(function() {

    $( 'ul.nav li.dropdown' ).hover(function() {
        // you could also use this condition: $( 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' );
        }
    });

});
2

Я пробую другие решения, я использую bootstrap 3, но выпадающее меню закрывается слишком быстро, чтобы перемещаться по нему

предполагается, что вы добавляете class= "dropdown" в li, я добавил тайм-аут

var hoverTimeout;
$('.dropdown').hover(function() {
    clearTimeout(hoverTimeout);
    $(this).addClass('open');
}, function() {
    var $self = $(this);
    hoverTimeout = setTimeout(function() {
        $self.removeClass('open');
    }, 150);
});
2

обновлено с помощью надлежащего плагина

я опубликовал правильный плагин для функции выпадающего наведения, в котором вы даже можете определить, что происходит при нажатии на dropdown-toggle элемент:

https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover

Почему я сделал это, когда уже есть много решений?

у меня были проблемы со всеми ранее существующими решениями. Простые CSS не используют .open класс .dropdown, Так что не будет обратной связи на выпадающем элементе переключения, когда выпадающий отображается.

JS те мешают нажав на .dropdown-toggle, поэтому раскрывающийся список отображается при наведении, а затем скрывает его при нажатии на открытый раскрывающийся список, и перемещение мыши вызовет раскрывающийся список, чтобы снова появиться. Некоторые из решений js тормозят совместимость с iOS, некоторые плагины не работают в современных настольных браузерах, поддерживающих touch события.

вот почему я сделал Bootstrap Выпадающий Hover плагин, который предотвращает все эти проблемы, используя только стандартный загрузочный javascript API, без какого-либо взлома.

2

Это поможет вам сделать свой собственный класс наведения для bootstrap:

CSS:

/* Hover dropdown */
.hover_drop_down.input-group-btn ul.dropdown-menu{margin-top: 0px;}/*To avoid unwanted close*/
.hover_drop_down.btn-group ul.dropdown-menu{margin-top:2px;}/*To avoid unwanted close*/
.hover_drop_down:hover ul.dropdown-menu{
   display: block;
}

поля установлены, чтобы избежать нежелательного закрытия, и они являются необязательными.

HTML-код:

<div class="btn-group hover_drop_down">
  <button type="button" class="btn btn-default" data-toggle="dropdown"></button>
  <ul class="dropdown-menu" role="menu">
    ...
  </ul>
</div>

Не забудьте удалить атрибут button data-toggle= "dropdown" если вы хотите удалить onclick open, и это также будет работать, когда вход добавляется с выпадающим списком.

1
    $('.navbar .dropdown').hover(function() {
      $(this).find('.dropdown-menu').first().stop(true, true).slideDown(150);
    }, function() {
      $(this).find('.dropdown-menu').first().stop(true, true).slideUp(105)
    });
1

запуск click событие hover есть небольшие ошибки. Если mouse-in и click создает эффект наоборот. Это opens, когда mouse-out и close, когда mouse-in. Лучшее решение:

$('.dropdown').hover(function() {
    if (!($(this).hasClass('open'))) {
        $('.dropdown-toggle', this).trigger('click');
    }
}, function() {
    if ($(this).hasClass('open')) {
        $('.dropdown-toggle', this).trigger('click');
    }
});
1

решение, которое я предлагаю, обнаруживает, если его не сенсорное устройство и что navbar-toggle (меню гамбургера) не отображается и делает Родительский пункт меню раскрывая подменю на hover и перейдите по ссылке на click.

также делает Tne margin-top 0, потому что разрыв между navbar и меню в некотором браузере не позволит вам наведите курсор на subitems

$(function(){
    function is_touch_device() {
        return 'ontouchstart' in window        // works on most browsers 
        || navigator.maxTouchPoints;       // works on IE10/11 and Surface
    };

    if(!is_touch_device() && $('.navbar-toggle:hidden')){
      $('.dropdown-menu', this).css('margin-top',0);
      $('.dropdown').hover(function(){ 
          $('.dropdown-toggle', this).trigger('click').toggleClass("disabled"); 
      });			
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>

$(function(){
  $("#nav .dropdown").hover(
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeIn("fast");
      $(this).toggleClass('open');
    },
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeOut("fast");
      $(this).toggleClass('open');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>
0