Bootstrap выпадающий с Hover
Итак, что мне нужно, это довольно просто.
Я настроил навигационную панель с выпадающими меню (используя class="dropdown-toggle" data-toggle="dropdown") и работает нормально.
Дело в том, что это работает "onClick"Хотя я бы предпочел, чтобы это работало"onHover".
Есть ли встроенный способ сделать это?
26 ответов
Самое простое решение было бы в 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:
Тот же вопрос здесь
Итак, у вас есть этот код:
<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 мс. Если вы удивляетесь, почему я это использую, вам нужно время, чтобы перетащить курсор с кнопки над меню. Когда вы находитесь в меню, время сбрасывается, и вы можете оставаться там столько раз, сколько хотите. Когда вы выходите из меню, мы скрываем меню мгновенно, без перерыва.
Я использовал этот код во многих проектах, если у вас возникнут какие-либо проблемы с его использованием, не стесняйтесь задавать мне вопросы.
Наведите указатель мыши на элементы навигации, чтобы увидеть, что они активируются при наведении курсора. http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/
Это поможет вам создать собственный класс 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, и это также будет работать, когда ввод добавляется с выпадающим списком.
Это то, что я использую, чтобы сделать его раскрывающимся при наведении курсора с некоторым 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');
});
});
Обновлено с правильным плагином
Я опубликовал соответствующий плагин для функции всплывающего окна, в котором вы даже можете определить, что происходит при нажатии на dropdown-toggle элемент:
https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover
Зачем я это сделал, когда уже есть много решений?
У меня были проблемы со всеми ранее существующими решениями. Простые CSS не используют .open класс на .dropdown, поэтому не будет никакой обратной связи по элементу переключателя выпадающего меню, когда раскрывающийся список виден.
JS те, которые мешают нажать на .dropdown-toggleТаким образом, раскрывающийся список отображается при наведении курсора, а затем скрывается при нажатии на раскрывающийся раскрывающийся список, а перемещение мыши приводит к его повторному отображению. Некоторые из решений js тормозят совместимость с iOS, некоторые плагины не работают на современных настольных браузерах, которые поддерживают сенсорные события.
Вот почему я создал плагин Bootstrap Dropdown Hover, который предотвращает все эти проблемы, используя только стандартный API-интерфейс Bootstrap javascript, без каких-либо взломов.
Попробуйте это, используя функцию наведения с анимацией постепенного исчезновения
$('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);
});
Я пробую другие решения, я использую 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);
});
Запуск 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');
}
});
Это приводит к зависанию панели навигации только в том случае, если вы не находитесь на мобильном устройстве, потому что я считаю, что наведение навигации не работает на мобильных устройствах:
$( 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 5.x вы можете добавить собственный класс, напримерdropdown-hoverк основному раскрывающемуся элементу. затем управляйте событиями наведения с помощью JQuery.
Раскрывающийся список начальной загрузки Работайте при наведении курсора и оставайтесь близко при щелчке, добавляя свойство 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>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
});
}
);
});
$('.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)
});
Использовать
mouseover()функция для запуска щелчка. Таким образом, предыдущее событие щелчка не повредит. Пользователь может использовать как наведение, так и щелчок / касание. Он будет удобен для мобильных устройств.
$(".dropdown-toggle").mouseover(function(){
$(this).trigger('click');
})
Настройка @user1079877 и @BanAnanas работала нормально с устаревшей загрузкой, но требовала незначительных исправлений и добавления возможности держать меню открытым до тех пор, пока страница не выгрузится из браузера:
$('.dropdown').on('mouseenter', function () {
if (!$('.navbar-toggle').is(':visible')) {
$(this).addClass('open');
}
});
$('.dropdown').on('mouseleave', function () {
if ($('.navbar-toggle').is(':visible')) {
$(this).removeClass('open');
}
});
$('.navbar-toggle .navbar-item a').on('click', function (e) {
e.stopPropagation();
});
Bootstrap 5 с версией jquery
Просто добавьhoverableкласс в раскрывающийся список и добавьте приведенный ниже код в основной файл javascript
// Hoverable dropdown
$('.dropdown.hoverable').on({
mouseenter: function(){
var dropdown = $(this).children('.dropdown-menu');
if(!dropdown.hasClass('show') && dropdown.css('position') !== 'static'){ // Ignore collapsed navbar
bootstrap.Dropdown.getOrCreateInstance(this).toggle();
}
},
mouseleave: function(){
var dropdown = $(this).children('.dropdown-menu');
if(dropdown.hasClass('show') && dropdown.css('position') !== 'static'){ // Ignore collapsed navbar
bootstrap.Dropdown.getOrCreateInstance(this).toggle();
}
}
});
Протестировано и работает нормально
<nav class="dnt_show_mbl navbar navbar-default navbar-fixed-top" >
<div class="container" style="width:100%;">
<div class="navbar-header" style="height:90px;">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand dnt_show_mbl" href="index.html" style="margin-left:100%;margin-top:2%;">
<img src="material/logo.png" width="160px;" alt="visoka">
</a>
<a class="navbar-brand dontdisplaylg" href="index.html" style="" alt="visoka">
<img src="material/logo.png" width="200px;">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar" style="background-color: #fff;border-color:#fff;">
<ul class="nav navbar-nav navbar-right" style="margin-top: 4px;margin-right: 180px;padding:15px;letter-spacing:1px;color:#000;">
<li><a href="index.html" style="font-family: Inter !important;">HOME</a></li>
<li><a href="About-Us.html" style="font-family: Inter !important;">ABOUT US</a></li>
<li class="dropdown-header" style="margin-top:-3px;margin-left:-3%;" onmouseout="out_menu();" onmouseover="on_menu();">
<a style="font-family: Inter !important;" class="dropdown-toggle" href="Projects.html">PROJECTS
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="Projects.html#ongoing" style="font-family: Inter !important;">Ongoing Projects</a></li><br>
<li><a href="Projects.html#completed" style="font-family: Inter !important;">Completed Projects</a></li><br>
<li><a href="Projects.html#upcoming" style="font-family: Inter !important;">Upcoming Projects</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<script>
function on_menu(){
$(".dropdown-header:first").addClass("open");
}
function out_menu(){
$(".dropdown-header:first").removeClass("open");
}
</script>
Можете добавитьonmouseenter="this.click()"в раскрывающемся списке дляauto-open& добавлятьonmouseleave="dropdownbutton.click()"в раскрывающемся меню дляauto-close.
Так:
<div class="dropdown" onmouseleave="document.getElementsByClassName('dropdown-toggle')[0].click()">
<a class="dropdown-toggle" data-bs-toggle="dropdown" onmouseenter="this.click()">DropDown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
Вы реализуете эту функциональность с помощью Jquery:
$('.dropdown').on('mouseover', function(){
$(this).addClass('show');
$('.dropdown-menu').addClass('show');
$('.dropdown-toggle').attr('aria-expanded', 'true');
});
$('.dropdown').on('mouseout', function(){
$(this).removeClass('show');
$('.dropdown-menu').removeClass('show');
$('.dropdown-toggle').attr('aria-expanded', 'false');
});
Решение, которое я предлагаю, обнаруживает, если это не сенсорное устройство, и что 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>