悬停时的引导下拉菜单幻灯片动画

Question

我正在尝试在 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);

Answer 1

我认为你不需要所有的代码来让它在悬停时下拉，我用这个 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');
      });
   });

Answer 2

或者只是这些简单的 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;
        }

Answer 3

如果有人需要引导原生功能。只需在 jquery 和 bootstrap.min.js 之后添加此代码

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

以上代码仅供引导用户使用