我正在尝试在Bootstrap菜单下拉菜单上实现向上/向下滑动动画。该框架的版本是3.1。悬停有效,但向上滑动/向下滑动仍可在点击时起作用,而不是悬停。
最终目标是让它在鼠标滑过时向下滑动并在鼠标滑出时向上滑动。
I'm using this plugin for the hover effect
代码:
;
(function ($, window, undefined) {
// don't do anything if touch is supported
// (plugin causes some issues on mobile)
if ('ontouchstart' in document) return;
// outside the scope of the jQuery plugin to
// keep track of all dropdowns
var $allDropdowns = $();
// if instantlyCloseOthers is true, then it will instantly
// shut other nav items when a new one is hovered over
$.fn.dropdownHover = function (options) {
// the element we really care about
// is the dropdown-toggle's parent
$allDropdowns = $allDropdowns.add(this.parent());
return this.each(function () {
var $this = $(this),
$parent = $this.parent(),
defaults = {
delay: 500,
instantlyCloseOthers: true
},
data = {
delay: $(this).data('delay'),
instantlyCloseOthers: $(this).data('close-others')
},
settings = $.extend(true, {}, defaults, options, data),
timeout;
$parent.hover(function (event) {
// so a neighbor can't open the dropdown
if (!$parent.hasClass('open') && !$this.is(event.target)) {
return true;
}
if (settings.instantlyCloseOthers === true)
$allDropdowns.removeClass('open');
window.clearTimeout(timeout);
$parent.addClass('open');
$parent.trigger($.Event('show.bs.dropdown'));
}, function () {
timeout = window.setTimeout(function () {
$parent.removeClass('open');
$parent.trigger('hide.bs.dropdown');
}, settings.delay);
});
// this helps with button groups!
$this.hover(function () {
if (settings.instantlyCloseOthers === true)
$allDropdowns.removeClass('open');
window.clearTimeout(timeout);
$parent.addClass('open');
$parent.trigger($.Event('show.bs.dropdown'));
});
// handle submenus
$parent.find('.dropdown-submenu').each(function () {
var $this = $(this);
var subTimeout;
$this.hover(function () {
window.clearTimeout(subTimeout);
$this.children('.dropdown-menu').first().stop(true, true).slideDown();
// always close submenu siblings instantly
$this.siblings().children('.dropdown-menu').first().stop(true, true).slideUp();
}, function () {
var $submenu = $this.children('.dropdown-menu');
subTimeout = window.setTimeout(function () {
$submenu.hide();
}, settings.delay);
});
});
});
};
$(document).ready(function () {
// apply dropdownHover to all elements with the data-hover="dropdown" attribute
$('[data-hover="dropdown"]').dropdownHover();
// Slide Down //
$('.dropdown').on('show.bs.dropdown', function (e) {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
// Slide Up //
$('.dropdown').on('hide.bs.dropdown', function (e) {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});
});
})(jQuery, this);
答案 0 :(得分:7)
我认为你不需要所有的代码只是为了让它在悬停时下降,我使用这个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');
});
});
答案 1 :(得分:0)
或者只是这些简单的CSS:
/** make dropdown active on hover and fade in **/
ul.nav li.dropdown > ul.dropdown-menu{
visibility:hidden;
display:block;
opacity:0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
ul.nav li.dropdown:hover > ul.dropdown-menu{
visibility:visible;
opacity:0.9;
display: block;
background: #ccc;
}
.dropdown-menu.sub-menu {
margin-left: 147px;
margin-top: -20px;
}
答案 2 :(得分:0)
如果有人需要单击(本机)引导程序功能
$('.dropdown').on('show.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
});
$('.dropdown').on('hide.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(200);
});