Bootstrap 多级下拉幻灯片效果？

Question

我在自己创建的 Bootstrap 项目中有一个多级下拉菜单。我需要它这样下拉菜单才会滑动。我该如何做到这一点？

我已经完成了以下代码，但我需要添加它。以下是代码的作用：

• 如果您点击下拉开关，它会打开和关闭特定下拉菜单。
• 如果您在下拉菜单外部但在其父下拉菜单内单击，则只有子下拉菜单会关闭；如果您在父级外部单击，则父级将关闭，依此类推。
• 如果您点击子下拉菜单的下拉开关，它只会影响该下拉菜单及其子下拉菜单，不影响其父下拉菜单。

我已阅读此答案以尝试将其与我当前的解决方案一起使用，但我不知道如何使其正常工作：https://stackoverflow.com/a/19339162/1934402

我确信它有更多的规格，但你明白了。这也是我制作的一个 jsfiddle：http://jsfiddle.net/hhb9u7db/

例如，我将 Collections 链接设为一个下拉菜单，而 T-shirts 作为另一个下拉菜单。我希望这一切都像我现在的工作方式一样工作，除了它会滑动。

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

Answer 1

你的小提琴对我来说并不完全清楚。您的导航栏没有 .navbar 类，您的导航菜单没有 .navbar-nav。

您可以尝试添加如下所示的 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;
}

演示：http://jsfiddle.net/hhb9u7db/1/

资源：

1. Transitions on the display: property
2. http://davidwalsh.name/css-slide

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

使用autoprefix plugin 编译成以下 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;
}

演示：http://www.bootply.com/dd5aFlGTTE