如何在 Bootstrap v4.1 中实现多级下拉菜单？ [复制]

Posted 2023-03-05

【中文标题】如何在 Bootstrap v4.1 中实现多级下拉菜单？ [复制]

【英文标题】：How to achieve Multi Level dropdowns in Bootstrap v4.1? [duplicate]

【发布时间】：2018-10-18 02:18:15

【问题描述】：

我使用了下拉类并想使用按钮下拉菜单，我想在一个下拉菜单中显示更多的孩子。

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button"
id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"aria- 
expanded="false">Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
</div>
</div>

【参考方案1】：

Bootstrap 本身不支持它。所以你必须自己做一些 css/javascript/html 魔术或使用库。

不支持嵌套下拉菜单，并且自 v3 以来一直不支持。

source

【参考方案2】：

Bootstrap v4.1 没有直接的原生支持。您需要手动自定义 BootStrap 中现有的编码结构。但如果你只是在学习引导程序，那可能会很棘手。

给你一个小建议：选择更新的框架，比如我公司开发的框架：https://www.offra.io/components/dropdown.php

您可以使用 Offra 实现这样的多级下拉菜单，而无需太多开销！你可以自己试试下面的代码sn-p：

<div class="dropdown">
    <button class="btn" id="dropdown8" data-activity="dropdown">Drop Down</button>
    <div class="offra-dropdown  sh-3dp" data-target-dropdown="dropdown8">
       <ul>
           <li>
               <a href="#">
                   Menu1-label 1
               </a>
           </li>
           <li>
               <a href="#">
                   Menu2-label 1
               </a>
               <ul>
                   <li>
                       <a href="#">
                           Menu2-child1-label 2
                       </a>
                       <ul>
                           <li>
                               <a href="#">
                                   Menu2-child1-label 3
                               </a>
                           </li>
                           <li>
                               <a href="#">
                                  Menu2-child2-label 3
                               </a>
                           </li>
                       </ul>
                   </li>
                   <li>
                       <a href="#">
                           Menu2-child2-label 2
                       </a>
                   </li>
               </ul>
           </li>
           <li>
               <a href="#">
                   Menu3-label 1
               </a>
               <ul>
                   <li>
                       <a href="#">
                           Menu3-child1-label 2
                       </a>
                       <ul>
                           <li>
                               <a href="#">
                                   Menu3-child1-label 3
                               </a>
                           </li>
                           <li>
                               <a href="#">
                                  Menu3-child2-label 3
                               </a>
                           </li>
                       </ul>
                   </li>
                   <li>
                       <a href="#">
                           Menu3-child2-label 2
                       </a>
                   </li>
               </ul>
           </li>
           <li>
               <a href="#">
                   Menu4-label 1
               </a>
           </li>
       </ul>
    </div>
</div>

【讨论】：

正是我需要的。非常感谢。您的框架看起来很像 BootStrap 的启发，但仍然感谢您。

感谢您的回复。继续使用 Offra，让我们知道您面临的其他问题。总是很乐意提供帮助！