點擊動畫引導下拉菜單

Question

$('.navbar .dropdown').hover(function() { 
    $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown(); 
}, function() { 
    $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp() 
}); 

隨着鼠標懸停工作正常，但我需要點擊後打開。如果我將.hover與.click替換爲單擊下拉菜單時，它會快速打開和關閉。

是否有可能使用bootstrap做到這一點，點擊時打開並在鼠標懸停或點擊其他任何地方時關閉？任何幫助。謝謝。

Answer 1

試試這個，看看這是你在找什麼。點擊打開下拉菜單，鼠標將其隱藏起來。 http://jsbin.com/ibovag/1/

$('.dropdown-menu').on('mouseover', function(){ 
    $(this).on('mouseleave',hideDropdown); 
}); 
function hideDropdown(e) 
{ 
    $(this).closest('.open').removeClass('open'); 
    $(this).off('mouseleave'); 
} 

Answer 2

您可以使用jQuery的slideToggle！

http://api.jquery.com/slideToggle/

這樣的：

$('.navbar .dropdown').click(function() { 
    $('.dropdown-menu', this).slideToggle(250); 
}); 

Answer 3

您可以使用CSS3過渡：

.dropdown-menu { 
    -webkit-transition: all 300ms ease-out; 
    transition: all 300ms ease-out; 
    opacity: 0; 
    display: block; 
} 

.open .dropdown-menu { 
    opacity: 1; 
} 

檢查瀏覽器的支持上http://caniuse.com/css-transitions

Answer 4

處於引導3，你可以使用下拉事件：

 // ADD SLIDEDOWN ANIMATION TO DROPDOWN // 
     $('.dropdown').on('show.bs.dropdown', function (e) { 
      $(this).find('.dropdown-menu').first().stop(true, true).slideDown(); 
     }); 

     // ADD SLIDEUP ANIMATION TO DROPDOWN // 
     $('.dropdown').on('hide.bs.dropdown', function (e) { 
      $(this).find('.dropdown-menu').first().stop(true, true).slideUp(); 
     }); 

Answer 5

我已經使用這個懸停和工作正常，這裏是這個

http://jsfiddle.net/html5beginners/rtqnxrLd/6/embedded/result/

body { 
    background: #333; 
    width: 98% !important; 
} 
.DonateUs{ 
    width: 200px; 
height: 60px; 
background: none repeat scroll 0% 0% #16A085; 
color: #fff; 
Padding: 13px 56px; 
font-size: 20px; 
border-radius: 5px; 
box-shadow: 0px 4px 0px #023d31; 
float:right 
text-shadow: 0px 1px 0px #023d31;font-family: oswald; 
} 
.navbar-x { 
    text-align: center; 
} 

.navbar-x .nav { 
    position: relative; 
    overflow: hidden; 
    display: inline-block; 
} 

.navbar-x .nav:hover.nav-pills > li.active > a, .navbar-x .nav:focus.nav-pills > li.active > a { 
    color: #eee; 
} 

.navbar-x .nav:hover.nav-pills > li.active > a:hover, .navbar-x .nav:hover.nav-pills > li.active > a:focus, .navbar-x .nav:focus.nav-pills > li.active > a:hover, .navbar-x .nav:focus.nav-pills > li.active > a:focus { 
    color: #FFCB00; 
    background-color: inherit; 
} 

.navbar-x .nav > li > a { 
    width: 94px; 
    color: #eee; 
    transition: color 0.42s ease-in-out; 
} 

.navbar-x .nav > li > a:hover, .navbar-x .nav > li > a:focus { 
    color: #FFCB00; 
    background-color: inherit; 
} 

.navbar-x .nav > li.active > a { 
    color: #FFCB00; 
    background-color: inherit; 
} 

.navbar-x .nav > li.bottom-bar { 
    transition: left 0.42s ease-in-out; 
    position: absolute; 
    height: 3px; 
    width: 90px; 
    bottom: 0; 
    background-color: #ebbf00; 
} 

.navbar-x .nav > li:nth-child(1).active ~ .bottom-bar { 
    left: 0px; 
} 

.navbar-x .nav > li:nth-child(1):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(1):focus ~ .bottom-bar { 
    left: 0px !important; 
} 

.navbar-x .nav > li:nth-child(2).active ~ .bottom-bar { 
    left: 100px; 
} 

.navbar-x .nav > li:nth-child(2):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(2):focus ~ .bottom-bar { 
    left: 100px !important; 
} 

.navbar-x .nav > li:nth-child(3).active ~ .bottom-bar { 
    left: 200px; 
} 

.navbar-x .nav > li:nth-child(3):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(3):focus ~ .bottom-bar { 
    left: 200px !important; 
} 

.navbar-x .nav > li:nth-child(4).active ~ .bottom-bar { 
    left: 300px; 
} 

.navbar-x .nav > li:nth-child(4):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(4):focus ~ .bottom-bar { 
    left: 300px !important; 
} 

.navbar-x .nav > li:nth-child(5).active ~ .bottom-bar { 
    left: 400px; 
} 

.navbar-x .nav > li:nth-child(5):hover ~ .bottom-bar, .navbar-x .nav > li:nth-child(5):focus ~ .bottom-bar { 
    left: 400px !important; 
} 

.about { 
    margin: 70px auto 40px; 
    padding: 8px; 
    width: 360px; 
    font: 10px/18px 'Lucida Grande', Arial, sans-serif; 
    color: #bbb; 
    text-align: center; 
    text-shadow: 0 -1px rgba(0, 0, 0, 0.3); 
    background: #383838; 
    background: rgba(34, 34, 34, 0.8); 
    border-radius: 4px; 
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)); 
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)); 
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)); 
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)); 
    -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.4); 
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.4); 
} 

.about a { 
    color: #eee; 
    text-decoration: none; 
    border-radius: 2px; 
    -webkit-transition: background 0.1s; 
    -moz-transition: background 0.1s; 
    -o-transition: background 0.1s; 
    transition: background 0.1s; 
} 

.about a:hover { 
    text-decoration: none; 
    background: #555; 
    background: rgba(255, 255, 255, 0.15); 
} 

.about-links { 
    height: 30px; 
} 

.about-links > a { 
    float: left; 
    width: 33%; 
    line-height: 30px; 
    font-size: 12px; 
} 

.about-author { 
    margin-top: 5px; 
} 

.about-author > a { 
    padding: 1px 3px; 
    margin: 0 -1px; 
} 

.logo-html5beginners { 
    margin: -12px 0 0 0px; 
    width: 39%; 
} 

Answer 6

Yokomizor使用CSS過渡是一個不錯的主意的answer小提琴，但在他的代碼如下：

.dropdown-menu { 
    -webkit-transition: all 300ms ease-out; 
    transition: all 300ms ease-out; 
    opacity: 0; 
    display: block; 
} 
.open .dropdown-menu { 
    opacity: 1; 
} 

他最終做的是他只做下拉只是看不見，但實際上下拉的東西還在那裏，只是你看不到它而已。更好的方法是：

.dropdown-menu { 
    -webkit-transition: all .5s ease-out; 
    transition: all .5s ease-out; 
    transform: rotateX(90deg); 
    transform-origin: top; 
    opacity: 0; 
    display: block; 
} 
.open .dropdown-menu { 
    opacity: 1; 
    transform: rotateX(0deg); 
    transform-origin: top; 
} 

在這種情況下，它也創造了一個很好的（那種）滑動向下和向上的動畫。

Demo