Bootstrap 5中的多级下拉菜单

rbl8hiat 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(2)|浏览(532)

我想使用多级下拉菜单为新的Bootsrap 5。我尝试了旧的代码为4，但没有工作。有人有一个工作代码为Bootsrap 5？

twitter-bootstrap

来源：https://stackoverflow.com/questions/65658376/multi-level-dropdown-menu-in-bootstrap-5

2条答案

按热度按时间

disbfnqx1#

您可以通过使用普通的引导组件来实现它，而无需任何额外的javascript代码：其思想是将Dropdown组件与嵌套的Dropend或Dropstart组件一起使用，并在父Dropdown组件上使用选项data-bs-auto-close ="outside"。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  </head>
  <body>
    <div class="dropdown">
                <button
                    class="btn btn-secondary dropdown-toggle bg-transparent text-dark btn-sm ms-3"
                    type="button"
                    id="MyAccountDDM"
                    data-bs-toggle="dropdown"
                    data-bs-auto-close="outside"
                    aria-expanded="false"
                >
                   AAA
                </button>

                <ul class="dropdown-menu" aria-labelledby="MyAccountDDM" id="AppDropDownId">
                        <li>
                            <a
                            >
                                BBB
                            </a>
                        </li>
               
                    <li>
                        <div
                            class="btn-group dropend"
                        >
                            <a type="button" class="dropdown-item dropdown-toggle p-0" data-bs-toggle="dropdown" aria-expanded="false">
                                CCC
                            </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a
                                        class="dropdown-item"
                                        href="#"
                                     >
                                        DDD
                                    </a>
                                </li>
                                <li>
                                    <a
                                        class="dropdown-item"
                                        href="#"    
                                    >
                                        EEE
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    
                        <li>
                            <hr class="dropdown-divider" />
                        </li>
                        <li>
                            <a                                        
                            >
                                FFF
                            </a>
                        </li>
                   
                </ul>
            </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  </body>
</html>

赞(0）回复(0）举报 2022-12-07

pod7payv2#

具有少量自定义的多级菜单项

第一个

赞(0）回复(0）举报 2022-12-07