懸停下拉菜單滑動動畫

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