如何使用 Bootstrap 4 和 Angular 7 在導航欄中制作多級下拉菜單

Question

我想使用bootstrap 4和angular 7創建多級 dropdwon。

我可以使用 bootstrap 的官方文檔在導航欄中創建簡單的下拉菜單。

但是當我嘗試創建多級下拉列表時，它不會工作。

Bootstrap 4：導航內的多級下拉菜單

使用上面的鏈接，我可以找到制作多級下拉列表的解決方案。

但它使用某種 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。

任何一種解決方案都將不勝感激。

我需要這樣的結果

Answer 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