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>

來源

2017-10-01 meez

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

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

編輯：原來，引導任意決定是否要根據是否父申請PopperJS風格元素有navbar類。見this問題

來源

2017-10-27 02:44:02 Jake

Bootstrap 4下拉使用自定義容器

回答

相關問題