ブートストラップ4ドロップダウンカスタムコンテナを使用

Question

私はブートストラップ4ドロップダウンに基づいてメガメニューを構築しています。

カスタムコンテナ（<div class="dropdown-container">など）を使用して、ドロップダウンの内容を表示/非表示します。ブートストラップ<div class="dropdown-menu">を使用する代わりに。

メガメニューを配置すると、<div class="dropdown-menu">を使用すると、ブートストラップによって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> 

Answer 1

私は、次のCSSとdropdown-menuクラスに私のクラスmegamenuを添付：

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

編集：結局のところ、ブートストラップは、任意かどうか、親に基づいてPopperJSスタイルを適用するか否かを判断します要素はnavbarクラスです。 this号