Раскрывающийся список Bootstrap с наведением
хорошо, так что мне нужно довольно просто.
Я установил navbar с некоторыми раскрывающимися меню в нем (используя class="dropdown-toggle" data-toggle="dropdown"
), и она отлично работает.
дело в том, что это работает "onClick
", в то время как я предпочел бы, чтобы это сработало "onHover
".
есть ли встроенный способ сделать это?
17 ответов
самым простым решением будет 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');
}
}
});
наведите курсор на элементы навигации, чтобы увидеть, что они активируются при наведении. 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>
обычно он работает на событии 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. Если вам интересно, почему я использую это, потому что вам нужно время, чтобы перетащить курсор с кнопки над меню. Когда вы находитесь в меню, время сбрасывается, и вы можете оставаться там столько времени, сколько хотите. Когда вы выйдете из меню, мы скроем меню мгновенно без тайм-аута.
я использовал этот код во многих проектах, если у вас возникнут проблемы с использованием его, не стесняйтесь задавать мне вопросы.
Это то, что я использую, чтобы сделать его выпадающим при наведении с помощью 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');
});
});
попробуйте это с помощью функции наведения с 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);
});
Это только витает навигации, когда вы находитесь не на мобильном устройстве, потому что я считаю, что при наведении не работает навигация на мобильных устройств:
$( 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, некоторые плагины не работают в современных настольных браузерах, поддерживающих touch события.
вот почему я сделал Bootstrap Выпадающий Hover плагин, который предотвращает все эти проблемы, используя только стандартный загрузочный javascript API, без какого-либо взлома.
Это поможет вам сделать свой собственный класс наведения для 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, и это также будет работать, когда вход добавляется с выпадающим списком.
$('.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');
}
});
решение, которое я предлагаю, обнаруживает, если его не сенсорное устройство и что 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>