Bootstrap 4下拉使用自定义容器

问题描述：

我正在构建基于Bootstrap 4下拉菜单的Megamenu。Bootstrap 4下拉使用自定义容器

我想使用自定义容器，例如<div class="dropdown-container">，它显示/隐藏下拉内容。而不是使用Bootstrap <div class="dropdown-menu">。

因为与定位Megamenu我有问题，因为style="position: absolute; transform: translate3d(0px, 38px, 0px); top: 0px; left: 0px; will-change: transform;" Bootstrap添加时使用<div class="dropdown-menu">。

我想：

$('li.dropdown').click(function() { 
    $('.dropdown-container').toggleClass('show') 
    });

但是当我点击它没有显示另一个菜单项/隐藏了吗？

这是标记。

<li class="nav-item expanded dropdown dropdown-megamenu"> 
      <a href="/test" class="nav-link dropdown-toggle" data-target="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">MegaMenu test link <span class="caret"></span></a> 
    <div class="dropdown-container"> 
    <!-- Dropdown Megamenu content --> 
    </div> 
    </li> 
    <li class="nav-item expanded dropdown dropdown-megamenu"> 
      <a href="/test" class="nav-link dropdown-toggle" data-target="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">MegaMenu test link two<span class="caret"></span></a> 
    <div class="dropdown-container"> 
    <!-- Dropdown Megamenu content two --> 
    </div> 
    </li>

答

我附上我的类megamenu到dropdown-menu类下面的CSS：

.megamenu { 
    width: 100%; 
    transform: translate3d(0px, 70px, 0px) !important; 
    padding: 30px; 
    a { 
    padding: 0; 
    } 
}

编辑：原来，引导任意决定是否要根据是否父申请PopperJS风格元素有navbar类。见this问题

Bootstrap 4下拉使用自定义容器

相关推荐