Javascript 如何使用Bootstrap 4和Angular 7在Navbar中创建多级下拉菜单

我想使用bootstrap4和angular7创建多级dropdwon

我可以使用bootstrap的官方文档在navbar中创建简单的下拉列表

但当我尝试创建多级下拉列表时，它不起作用

使用上面的链接，我可以找到一个解决方案，使多级下拉

但它使用了某种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"
                        ],

下面是我的angular.json部分，用于引导css和js

任何一种解决方案都是值得感激的

我需要这样的结果

试试这个：

<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>

Bootstrap 3中的多级下拉菜单

---

请参阅参考资料：

这可能对jQuery有所帮助。检查这个答案是否可以帮助您：对于每个折叠方法或下拉引导都使用jQuery。否则就不行了work@NeenuChandran我已经检查过了，正如我所说的，它工作得很好。但问题是，我不喜欢使用JqQuery。所以我问是否有内置的方法来执行此操作。@Dariun我检查了此视频，并做了类似的操作。但结果并不像预期的那样。你真是个救命恩人。谢谢你的解决方案。解决方案适用于引导程序3。引导程序4与3非常不同。伙计们，请点击这个链接了解Bootstrap4解决方案。