Bootstrap выпадающий с Hover

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

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

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

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

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

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

Рабочая скрипка

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

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

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

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

Вот мой код:

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

Самый простой способ, используя 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);
    });  
});

Для 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');
        }
    }
});

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

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

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

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

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

<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>

Обычно он работает при событии щелчка, и вы хотите, чтобы он работал при событии при наведении. Это очень просто, просто используйте этот код 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();
        })
    })
})

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

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

Это то, что я использую, чтобы сделать его раскрывающимся при наведении курсора с некоторым 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');
    });
});

Попробуйте это, используя функцию наведения с анимацией постепенного исчезновения

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

Это поможет вам создать свой собственный класс hover для начальной загрузки:

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>

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

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

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

});

Я пробую другие решения, я использую 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);
});

Обновлено с правильным плагином

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

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

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

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

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

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

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

Инициирование 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');
    }
});

HTML

        <div class="dropdown">

            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                Dropdown Example <span class="caret"></span>
            </button>

            <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
            </ul>

        </div> 

JQuery

        $(document).ready( function() {                

            /* $(selector).hover( inFunction, outFunction ) */
            $('.dropdown').hover( 
                function() {                        
                    $(this).find('ul').css({
                        "display": "block",
                        "margin-top": 0
                    });                        
                }, 
                function() {                        
                    $(this).find('ul').css({
                        "display": "none",
                        "margin-top": 0
                    });                        
                } 
            );

        });

codepen

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

Также делает tne margin-top 0, потому что промежуток между панелью навигации и меню в некоторых браузерах не позволит вам навести курсор на подпункты

$(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>

Раскрывающийся список начальной загрузки Работайте при наведении курсора и оставайтесь близко при щелчке, добавляя свойство display: block; в CSS и удаление этих атрибутов data-toggle = "dropdown" role = "button" из тега кнопки

.dropdown:hover .dropdown-menu {
  display: block;
}

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">                                     
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>
</div>

</body>
</html>