Html 引导4：内部导航的多级下拉菜单

在Bootstrap4中创建多级下拉列表的最简单方法是什么？我在上面找到的所有示例要么太混乱，要么没有包含在nav中

我试着把一个下拉列表放在一个下拉列表中，但它似乎不起作用。有人能帮我做这个吗

下面是我的代码的基本概要：

以下是基于bootstrap4的多级下拉列表。我根据bootstrap4基本下拉列表进行了尝试

。下拉子菜单{
位置：相对位置；
}
.下拉子菜单a:：after{
变换：旋转（-90度）；
位置：绝对位置；
右：3px；
最高：40%；
}
.下拉子菜单：悬停.下拉菜单，.下拉子菜单：焦点.下拉菜单{
显示器：flex；
弯曲方向：立柱；
位置：绝对！重要；
利润上限：-30px；
左：100%；
}
@介质（最大宽度：992px）{
.下拉菜单{
宽度：50%；
}
.下拉菜单.下拉子菜单{
宽度：自动；
}
}

我使用下面的CSS和JavaScript。它使用一个额外的类

下拉子菜单

。我用Bootstrap4Beta测试了它

它支持多级子菜单

$（'.dropdown menu a.dropdown-toggle'）。打开（'click'，函数（e）{
if（！$（this）.next（）.hasClass（'show'））{
$（this）.parents（'.dropdown menu'）.first（）.find（'.show'）.removeClass（'show'）；
}
var$子菜单=$（this.next（'.dropdown menu'）；
$subMenu.toggleClass（'show'）；
$（this）.parents（'li.nav item.dropdown.show'）.on（'hidden.bs.dropdown'，function（e）{
$（'.dropdown子菜单.show'）.removeClass（'show'）；
});
返回false；
});
。下拉子菜单{
位置：相对位置；
}
.下拉子菜单a:：after{
变换：旋转（-90度）；
位置：绝对位置；
右：6px；
顶部：.8em；
}
.下拉子菜单.下拉菜单{
排名：0；
左：100%；
左边距：.1em；
右边距：.1rem；
}





























我发现这在所有设备中都非常有效

还有，有

它支持具有引导4的多级子菜单


$（文档）.ready（函数（）{
$（'.navbar a.dropdown-toggle'）。打开（'click'，函数（e）{
var$el=$（本）；
var$parent=$（this.offsetParent（“.dropdown menu”）；
$（this.parent（“li”）.toggleClass（'show'）；
if（！$parent.parent（）.hasClass（'navbar nav'））{
$el.next（）.css（{“top”：$el[0].offsetTop，“left”：$parent.outerWidth（）-4}）；
}
$（'.navbar nav li.show'）。不是（$（this.parents（“li”））。removeClass（“show”）；
返回false；
} );
} );
.navbar灯.navbar导航.nav链接{
颜色：rgb（64,64,64）；
}
.btco菜单li>a{
填充：10px 15px；
颜色：#000；
}
.btco菜单。活动a：焦点，
.btco菜单李a：焦点，
.navbar>.show>a:焦点{
背景：透明；
大纲：0；
}
.dropdown menu.show>.dropdown toggle:：after{
变换：旋转（-90度）；
}

































2018年更新
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

$('.dropdown-submenu > a').on("click", function(e) {
    var submenu = $(this);
    $('.dropdown-submenu .dropdown-menu').removeClass('show');
    submenu.next('.dropdown-menu').addClass('show');
    e.stopPropagation();
});

$('.dropdown').on("hidden.bs.dropdown", function() {
    // hide any open menus when parent closes
    $('.dropdown-menu.show').removeClass('show');
});

$.fn.dropdown = (function() {
    var $bsDropdown = $.fn.dropdown;
    return function(config) {
        if (typeof config === 'string' && config === 'toggle') { // dropdown toggle trigged
            $('.has-child-dropdown-show').removeClass('has-child-dropdown-show');
            $(this).closest('.dropdown').parents('.dropdown').addClass('has-child-dropdown-show');
        }
        var ret = $bsDropdown.call($(this), config);
        $(this).off('click.bs.dropdown'); // Turn off dropdown.js click event, it will call 'this.toggle()' internal
        return ret;
    }
})();

$(function() {
    $('.dropdown [data-toggle="dropdown"]').on('click', function(e) {
        $(this).dropdown('toggle');
        e.stopPropagation();
    });
    $('.dropdown').on('hide.bs.dropdown', function(e) {
        if ($(this).is('.has-child-dropdown-show')) {
            $(this).removeClass('has-child-dropdown-show');
            e.preventDefault();
        }
        e.stopPropagation();
    });
});