如何使用 Bootstrap 4 和 Angular 7 在导航栏中制作多级下拉菜单

Posted 2023-03-05

【中文标题】如何使用 Bootstrap 4 和 Angular 7 在导航栏中制作多级下拉菜单

【英文标题】：How to make multilevel Drop-down menu in Navbar using Bootstrap 4 and Angular 7

【发布时间】：2020-09-23 04:23:14

【问题描述】：

我想使用 bootstrap 4 和 angular 7 创建多级 dropdwon。

我可以使用 bootstrap 的官方文档在导航栏中创建简单的下拉菜单。

但是当我尝试创建多级下拉菜单时，它不起作用。

Bootstrap 4: Multilevel Dropdown Inside Navigation

使用上面的链接，我可以找到制作多级下拉菜单的解决方案。

但它使用某种 jQuery 代码来正常工作。

有没有使用引导程序制作多级下拉菜单的内置方法？

我在 bootstrap 的官方文档中没有看到任何与此相关的内容。

我不知道我的代码中是否遗漏了任何脚本或 css。

"styles": [
                            "node_modules/bootstrap/dist/css/bootstrap.min.css",
                            "src/styles.css"

                        ],
                        "scripts": [
                            "node_modules/jquery/dist/jquery.min.js",
                            "node_modules/bootstrap/dist/js/bootstrap.min.js",
                            "node_modules/popper.js/dist/popper.min.js"
                        ],

这是我用于引导 css 和 js 的 angular.json 部分。

任何一种解决方案都将不胜感激。

我需要这样的结果

【问题讨论】：

这可能对 jQuery 有帮助。 ***.com/a/45755948/8440216

检查这个答案是否可以帮助你：***.com/questions/61271254/…

对于每个折叠方法或下拉引导程序都使用 jQuery。否则它不会工作

@NeenuChandran 我已经检查过了，它工作正常，正如我所说。但问题是，我不喜欢使用 JqQuery。所以我问是否有内置的方法可以做到这一点.

@Dariun youtube.com/watch?v=jEAeDID1pks 我查看了这个视频，并确实这样做了。但结果并不像预期的那样。

【参考方案1】：

试试这个：

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<div class="container">
    <div class="row">
        <h2>Multi level dropdown menu in Bootstrap 3</h2>
        <hr>
        <div class="dropdown">
            <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
                Dropdown <span class="caret"></span>
            </a>
            <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
              <li><a href="#">Some action</a></li>
              <li><a href="#">Some other action</a></li>
              <li class="divider"></li>
              <li class="dropdown-submenu">
                <a tabindex="-1" href="#">Hover me for more options</a>
                <ul class="dropdown-menu">
                  <li><a tabindex="-1" href="#">Second level</a></li>
                  <li class="dropdown-submenu">
                    <a href="#">Even More..</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">3rd level</a></li>
                        <li><a href="#">3rd level</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Second level</a></li>
                  <li><a href="#">Second level</a></li>
                </ul>
              </li>
            </ul>
        </div>
    </div>
</div>

参见参考：https://bootsnipp.com/snippets/kM4Q

【讨论】：

你真的是一个救生员。感谢您的解决方案。该解决方案适用于 Bootstrap 3。Bootstrap 4 与 3 非常不同。codepen.io/svnt/pen/beEgre 伙计们，请点击此链接获取 Bootstrap 4 解决方案。