twitter-bootstrap 单击时动画引导下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16245923/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Animating bootstrap dropdown menu on click
提问by Labanino
$('.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()
});
With mouseover works fine but I need to open after clicked. If I replace .hoverwith .clickwhen the dropdown is clicked it opens and close real quick.
随着鼠标悬停工作正常，但我需要点击后打开。如果我更换.hover用。点击时下拉被点击它打开和关闭真正的快。
Is it possible to do it the traditional way with bootstrap, to open when clicked and to close when mouseout or click anywhere else? Any help. Thanks.
是否可以使用引导程序以传统方式进行操作，单击时打开并在鼠标移开或单击其他任何地方时关闭？任何帮助。谢谢。
回答by yokomizor
You can use CSS3 transitions:
您可以使用 CSS3 过渡：
.dropdown-menu {
-webkit-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
display: block;
}
.open .dropdown-menu {
opacity: 1;
}
Check browser support on http://caniuse.com/css-transitions
在http://caniuse.com/css-transitions上检查浏览器支持
回答by Manoj
In BootStrap 3, you can use dropdown events :
在 BootStrap 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();
});
回答by CZX
Yokomizor's answeron using CSS transitions is a nice idea, but in his code below:
Yokomizor对使用 CSS 转换的回答是一个不错的主意，但在他的代码中：
.dropdown-menu {
-webkit-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
display: block;
}
.open .dropdown-menu {
opacity: 1;
}
What he ends up doing is that he is only making the dropdown invisible only, but in actual fact the things on the dropdown is still there, just that you can't see it. A better way is:
他最终做的就是他只是让下拉菜单不可见，但实际上下拉菜单上的东西还在那里，只是你看不到它。更好的方法是：
.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;
}
In this case, it also creates a nice (sort of) slide down and up animation.
在这种情况下，它还创建了一个很好的（某种）上下滑动动画。
回答by PSL
Try this, see if this is what you are looking for. Click to open dropdown, mouse out to hide it. http://jsbin.com/ibovag/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');
}
回答by yokomizor
You can use slideToggle from JQuery!
您可以使用 JQuery 中的 slideToggle！
http://api.jquery.com/slideToggle/
http://api.jquery.com/slideToggle/
like this:
像这样：
$('.navbar .dropdown').click(function() {
$('.dropdown-menu', this).slideToggle(250);
});
回答by Anil Sahu
i have used this on hover and is working fine, here is the fiddle for this
我在悬停时使用过它并且工作正常，这是为此的小提琴
http://jsfiddle.net/html5beginners/rtqnxrLd/6/embedded/result/
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%;
}
