[英]Bootstrap multilevel dropdown slide effect?
I have a multilevel dropdown in a Bootstrap project I made. 我在Bootstrap项目中创建了一个多级下拉菜单。 I need it to be so that the dropdowns would slide. 我需要它,以便下拉菜单可以滑动。 How am I to accomplish that? 我该怎么做?
I have the following code done, but I need to add to it. 我已经完成了以下代码,但是需要添加它。 Here's what the code does: 代码是这样的:
I've read onto this answer to try and use it with my current solution, but I don't know how to get it to work properly: https://stackoverflow.com/a/19339162/1934402 我已经阅读了此答案以尝试将其与当前的解决方案一起使用,但我不知道如何使其正常工作: https : //stackoverflow.com/a/19339162/1934402
I'm sure it does more specifications, but you get the idea. 我敢肯定它有更多规范,但是您明白了。 Here is a jsfiddle I made, too: http://jsfiddle.net/hhb9u7db/ 这也是我制作的jsfiddle: http : //jsfiddle.net/hhb9u7db/
For an example, I made the Collections link be a dropdown with T-shirts as another dropdown. 例如,我将“ 收藏夹”链接设为一个下拉列表,而将T恤衫作为另一个下拉列表。 I want it all to work exactly like how I have it working now, except that it slides. 我希望它能像现在一样正常工作,只是它会滑动。
$(function() {
$('.dropdown').on({
"click": function(event) {
if ($(event.target).closest('.dropdown-toggle').length && $(this).parents('.dropdown').length === ($(event.target).parents('.dropdown').length - 1)) {
$(this).data('closable', true);
} else {
$(this).data('closable', false);
}
},
"hide.bs.dropdown": function(event) {
hide = $(this).data('closable');
$(this).data('closable', true);
return hide;
}
});
});
Your fiddle is not totally clear for me. 你的小提琴对我来说还不是很清楚。 Your navbar has no .navbar
class and your nav menus no .navbar-nav
. 您的导航栏没有.navbar
类,您的导航菜单没有.navbar-nav
。
You can try to add the CSS code like that shown below: 您可以尝试添加如下所示的CSS代码:
.dropdown-menu,
.open > .dropdown-menu,
.dropdown-menu,
.open > .dropdown-menu .dropdown-menu {
display: block;
max-height: 0;
overflow-y:hidden;
visibility: hidden;
-webkit-transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
-moz-transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
-o-transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
max-width: 100%;
}
.navbar-nav > li.open > .dropdown-menu,
.nav-pills > li.open > .dropdown-menu,
.nav-pills > li.open > .dropdown-menu .open .dropdown-menu {
max-height: 500px;
display: block;
visibility: visible;
-webkit-transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
-moz-transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
-o-transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
demo: http://jsfiddle.net/hhb9u7db/1/ 演示: http : //jsfiddle.net/hhb9u7db/1/
resources: 资源:
For Bootstrap default navbar you can use the following Less code: 对于Bootstrap默认导航栏,可以使用以下Less代码:
.dropdown-menu, .open > .dropdown-menu,
{
display:block;
max-height: 0;
overflow-y:hidden;
visibility:hidden;
transition:max-height 2s ease-in-out, visibility 1.8s ease-in;
max-width: 100%;
}
.navbar-nav > li.open > .dropdown-menu,
{
max-height: 500px;
display:block;
visibility:visible;
transition:max-height 2s ease-in-out, visibility 0s linear 0.5s;
transition-delay:0s;
}
Which compiles with the autoprefix plugin into the following CSS code ( lessc --autoprefix="Android 2.3,Android >= 4,Chrome >= 20,Firefox >= 24,Explorer >= 8,iOS >= 6,Opera >= 12,Safari >= 6"
): 使用autoprefix插件编译为以下CSS代码( lessc --autoprefix="Android 2.3,Android >= 4,Chrome >= 20,Firefox >= 24,Explorer >= 8,iOS >= 6,Opera >= 12,Safari >= 6"
):
.dropdown-menu,
.open > .dropdown-menu {
display: block;
max-height: 0;
overflow-y:hidden;
visibility: hidden;
-webkit-transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
-o-transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
transition: max-height 2s ease-in-out, visibility 1.8s ease-in;
max-width: 100%;
}
.navbar-nav > li.open > .dropdown-menu {
max-height: 500px;
display: block;
visibility: visible;
-webkit-transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
-o-transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
transition: max-height 2s ease-in-out, visibility 0s linear 0.5s;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
demo: http://www.bootply.com/dd5aFlGTTE 演示: http : //www.bootply.com/dd5aFlGTTE
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.