Question

我正在建立一个基于Bootstrap 4下拉列表的Megamenu。

我想使用自定义容器，例如<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>

Answer 1

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

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

编辑：事实证明，Bootstrap根据父元素是否具有navbar类来任意决定是否应用PopperJS样式。请参阅this问题

Bootstrap 4下拉列表使用自定义容器

1 个答案: