我如何在Bootstrap 5中实现嵌套下拉菜单，以确保子菜单打开并正确关闭？

Question

我如何在Bootstrap中修复多级下拉级问题，在此，子enus在单击时不会按预期打开？

？

i我尝试在Bootstrap中制作多级下拉菜单，无法正常运行。单击时，下拉“按摩类型”下的子菜单不会打开。这是我的代码：

<ul class="dropdown-menu" aria-labelledby="massagesDropdown">
                                    <li><a class="dropdown-item" href="historyOfMassages.html">History of Massages</a>
                                    <li><a class="dropdown-item" href="benefitsOfMassages.html">Benefits of Massages</a>
                                    <li class="dropstart">
                                        <a class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown" href="typesOfMassages.html">Types of Massages</a>
                                        <ul class="dropdown-menu">
                                            <li><a href="#" class="dropdown-item">Item 1</a></li>
                                            <li><a href="#" class="dropdown-item">Item 2</a></li>
                                            <li><a href="#" class="dropdown-item">Item 3</a></li>
                                        </ul>
                                    </li>
                                    </li>
                                </ul>

I尝试使用Bootstrap 5.3.3（前两个下拉菜单打开）进行多级倒数，但是第三个菜单开放。我认为这是因为Bootstrap一般不支持多级下拉列表，但是我已经走得太远了，Y项目可以停止并使用其他框架，例如TailWind

Answer 1

CSS

和js。以下是演示代码，只需播放下拉data-data-bs-auto-close =“ out offeR”properties

<li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">First Dropdown</a>
        <ul class="dropdown-menu">
           <li><a class="dropdown-item" href="#">Action</a></li>
           <li class="dropend">
              <a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">2nd Dropdown</a>
               <ul class="dropdown-menu dropdown-menu-end">
                 <li><a class="dropdown-item" href="#">Menu item</a></li>
                 <li><a class="dropdown-item" href="#">Menu item</a></li>
                 <li class="dropend">
                  <a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">3rd Dropdown</a>
                   <ul class="dropdown-menu dropdown-menu-end">
                    <li><a class="dropdown-item" href="#">Menu item</a></li>
                    <li><a class="dropdown-item" href="#">Menu item</a></li>
                    <li><a class="dropdown-item" href="#">Menu item</a></li>
                   </ul>
                 </li>
              </ul>
            </li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
</li>

为了参考，您可以在此处访问官方的Bootstrap下拉文档

https：//getBootstrap.com/docs/5.3/components/dropdowns