Bootstrap多級下拉幻燈片效果如何？

Question

我在Bootstrap項目中創建了一個多級下拉菜單。 我需要它，以便下拉菜單可以滑動。 我該怎么做？

我已經完成了以下代碼，但是需要添加它。 代碼是這樣的：

• 如果單擊特定下拉菜單，則打開或關閉該下拉菜單。
• 如果您在下拉列表的外部單擊，但在其父列表的內部單擊，則只有子下拉列表將關閉； 如果您在父級外部單擊，父級將關閉，依此類推。
• 如果你點擊一個孩子下拉的下拉菜單切換，它只會影響到下拉及其子女，而不是它的父母。

我已經閱讀了此答案以嘗試將其與當前的解決方案一起使用，但我不知道如何使其正常工作： https : //stackoverflow.com/a/19339162/1934402

我敢肯定它有更多規范，但是您明白了。 這也是我制作的jsfiddle： http : //jsfiddle.net/hhb9u7db/

例如，我將“ 收藏夾”鏈接設為一個下拉列表，而將T恤衫作為另一個下拉列表。 我希望它能像現在一樣正常工作，只是它會滑動。

$(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. 顯示的過渡：屬性
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插件編譯為以下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