Bootstrap 4 下拉菜单使用自定义容器答案

【问题标题】：Bootstrap 4 dropdown use custom containerBootstrap 4 下拉菜单使用自定义容器
【发布时间】：2018-03-12 14:45:59
【问题描述】：

我正在构建一个基于 Bootstrap 4 下拉菜单的 Megamenu。

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

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

我试过了：

$('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>

【问题讨论】：

标签： jquery drop-down-menu sass bootstrap-4 megamenu

【解决方案1】：

我使用以下 CSS 将我的课程 megamenu 附加到 dropdown-menu 课程：

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

edit：事实证明，Bootstrap 会根据父元素是否具有 navbar 类来任意确定是否应用 PopperJS 样式。见this问题

【讨论】：