MDBootstrap Treeview 无法按预期工作

Question

我在 ASP .NET Core Web 应用程序中为树视图使用了 MDBootstrap 解决方案。在这个 LINK 上有详细的教程如何将 treeview 插入到我的项目中。目前我只有这些了。

<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/mdb.min.css">
<!-- Plugin file -->
<link rel="stylesheet" href="./css/addons/datatables.min.css">
<link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="treeview-animated w-20 border mx-4 my-4">
        <h6 class="pt-3 pl-3">Folders</h6>
        <hr>
        <ul class="treeview-animated-list mb-3">
            <li class="treeview-animated-items">
                <a class="closed">
                    <i class="fas fa-angle-right"></i>
                    <span><i class="far fa-envelope-open ic-w mx-1"></i>Mail</span>
                </a>
                <ul class="nested">
                    <li>
                        <div class="treeview-animated-element"><i class="far fa-bell ic-w mr-1"></i>Offers </div>
                    </li>
                    <li>
                        <div class="treeview-animated-element"><i class="far fa-address-book ic-w mr-1"></i>Contacts</div>
                    </li>
                    <li class="treeview-animated-items">
                        <a class="closed">
                            <i class="fas fa-angle-right"></i>
                            <span><i class="far fa-calendar-alt ic-w mx-1"></i>Calendar</span>
                        </a>
                        <ul class="nested">
                            <li>
                                <div class="treeview-animated-element"><i class="far fa-clock ic-w mr-1"></i>Deadlines</div>
                            </li>
                            <li>
                                <div class="treeview-animated-element"><i class="fas fa-users ic-w mr-1"></i>Meetings</div>
                            </li>
                            <li>
                                <div class="treeview-animated-element"><i class="fas fa-basketball-ball ic-w mr-1"></i>Workouts</div>
                            </li>
                            <li>
                                <div class="treeview-animated-element"><i class="fas fa-mug-hot ic-w mr-1"></i>Events</div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="treeview-animated-items">
                <a class="closed">
                    <i class="fas fa-angle-right"></i>
                    <span><i class="far fa-folder-open ic-w mx-1"></i>Inbox</span>
                </a>
                <ul class="nested">
                    <li>
                        <div class="treeview-animated-element"><i class="far fa-folder-open ic-w mr-1"></i>Admin</div>
                    </li>
                    <li>
                        <div class="treeview-animated-element"><i class="far fa-folder-open ic-w mr-1"></i>Corporate</div>
                    </li>
                    <li>
                        <div class="treeview-animated-element"><i class="far fa-folder-open ic-w mr-1"></i>Finance</div>
                    </li>
                    <li>
                        <div class="treeview-animated-element"><i class="far fa-folder-open ic-w mr-1"></i>Other</div>
                    </li>
                </ul>
            </li>
            <li class="treeview-animated-items">
                <a class="closed">
                    <i class="fas fa-angle-right"></i>
                    <span><i class="far fa-gem mx-1"></i>Favourites</span>
                </a>
                <ul class="nested">
                    <li>
                        <div class="treeview-animated-element"><i class="fas fa-pepper-hot ic-w mr-1"></i>Restaurants</div>
                    </li>
                    <li>
                        <div class="treeview-animated-element"><i class="far fa-eye ic-w mr-1"></i>Places</div>
                    </li>
                    <li>
                        <div class="treeview-animated-element"><i class="fas fa-gamepad ic-w mr-1"></i>Games</div>
                    </li>
                    <li>
                        <div class="treeview-animated-element"><i class="fas fa-cocktail ic-w mr-1"></i>Coctails</div>
                    </li>
                    <li>
                        <div class="treeview-animated-element"><i class="fas fa-pizza-slice ic-w mr-1"></i>Food</div>
                    </li>
                </ul>
            </li>
            <li>
                <div class="treeview-animated-element"><i class="far fa-comment ic-w mr-1"></i>Notes</div>
            </li>
            <li>
                <div class="treeview-animated-element"><i class="fas fa-cogs ic-w mr-1"></i>Settings</div>
            </li>
            <li>
                <div class="treeview-animated-element"><i class="fas fa-desktop ic-w mr-1"></i>Devices</div>
            </li>
            <li>
                <div class="treeview-animated-element"><i class="fas fa-trash-alt ic-w mr-1"></i>Deleted Items</div>
            </li>
        </ul>
    </div>
    <script>
        // Treeview Initialization
        $(document).ready(function() {
            $('.treeview-animated').mdbTreeview();
        });
    </script>
    <script type="text/javascript" src="node_modules/mdbootstrap/js/jquery.min.js"></script>
    <script type="text/javascript" src="node_modules/mdbootstrap/js/popper.min.js"></script>
    <script type="text/javascript" src="node_modules/mdbootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="node_modules/mdbootstrap/js/mdb.min.js"></script>
</body>

这是它的行为方式

补充一下：这些项目不可点击，基本上无法进行互动。它只是一个静态文本。从上面提到的link我想用动画的。

我在这里遗漏了什么吗？

PS：如果需要更多信息来说明问题，请询问。

非常感谢。

Answer 1

加载所有脚本后需要执行$('.treeview-animated').mdbTreeview();:

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">

  <!-- Plugin file -->
  <link rel="stylesheet" href="./css/addons/datatables.min.css">
  <link rel="stylesheet" href="css/style.css">

  <style>
    ul,
    li {
      list-style-type: none;
    }
  </style>
</head>

<body>
  <div class="treeview-animated w-20 border mx-4 my-4">
    <h6 class="pt-3 pl-3">Folders</h6>
    <hr>
    <ul class="treeview-animated-list mb-3">
      <li class="treeview-animated-items">
        <a class="closed">
          <i class="fas fa-angle-right"></i>
          <span><i class="far fa-envelope-open ic-w mx-1"></i>Mail</span>
        </a>
        <ul class="nested">
          <li>
            <div class="treeview-animated-element"><i class="far fa-bell ic-w mr-1"></i>Offers </div>
          </li>
          <li>
            <div class="treeview-animated-element"><i class="far fa-address-book ic-w mr-1"></i>Contacts</div>
          </li>
          <li class="treeview-animated-items">
            <a class="closed">
              <i class="fas fa-angle-right"></i>
              <span><i class="far fa-calendar-alt ic-w mx-1"></i>Calendar</span>
            </a>
            <ul class="nested">
              <li>
                <div class="treeview-animated-element"><i class="far fa-clock ic-w mr-1"></i>Deadlines</div>
              </li>
              <li>
                <div class="treeview-animated-element"><i class="fas fa-users ic-w mr-1"></i>Meetings</div>
              </li>
              <li>
                <div class="treeview-animated-element"><i class="fas fa-basketball-ball ic-w mr-1"></i>Workouts</div>
              </li>
              <li>
                <div class="treeview-animated-element"><i class="fas fa-mug-hot ic-w mr-1"></i>Events</div>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="treeview-animated-items">
        <a class="closed">
          <i class="fas fa-angle-right"></i>
          <span><i class="far fa-folder-open ic-w mx-1"></i>Inbox</span>
        </a>
        <ul class="nested">
          <li>
            <div class="treeview-animated-element"><i class="far fa-folder-open ic-w mr-1"></i>Admin</div>
          </li>
          <li>
            <div class="treeview-animated-element"><i class="far fa-folder-open ic-w mr-1"></i>Corporate</div>
          </li>
          <li>
            <div class="treeview-animated-element"><i class="far fa-folder-open ic-w mr-1"></i>Finance</div>
          </li>
          <li>
            <div class="treeview-animated-element"><i class="far fa-folder-open ic-w mr-1"></i>Other</div>
          </li>
        </ul>
      </li>
      <li class="treeview-animated-items">
        <a class="closed">
          <i class="fas fa-angle-right"></i>
          <span><i class="far fa-gem mx-1"></i>Favourites</span>
        </a>
        <ul class="nested">
          <li>
            <div class="treeview-animated-element"><i class="fas fa-pepper-hot ic-w mr-1"></i>Restaurants</div>
          </li>
          <li>
            <div class="treeview-animated-element"><i class="far fa-eye ic-w mr-1"></i>Places</div>
          </li>
          <li>
            <div class="treeview-animated-element"><i class="fas fa-gamepad ic-w mr-1"></i>Games</div>
          </li>
          <li>
            <div class="treeview-animated-element"><i class="fas fa-cocktail ic-w mr-1"></i>Coctails</div>
          </li>
          <li>
            <div class="treeview-animated-element"><i class="fas fa-pizza-slice ic-w mr-1"></i>Food</div>
          </li>
        </ul>
      </li>
      <li>
        <div class="treeview-animated-element"><i class="far fa-comment ic-w mr-1"></i>Notes</div>
      </li>
      <li>
        <div class="treeview-animated-element"><i class="fas fa-cogs ic-w mr-1"></i>Settings</div>
      </li>
      <li>
        <div class="treeview-animated-element"><i class="fas fa-desktop ic-w mr-1"></i>Devices</div>
      </li>
      <li>
        <div class="treeview-animated-element"><i class="fas fa-trash-alt ic-w mr-1"></i>Deleted Items</div>
      </li>
    </ul>
  </div>

  <!-- JQuery -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>


  <script>
    // Treeview Initialization
    $(document).ready(function() {
      $('.treeview-animated').mdbTreeview();
    });
  </script>
</body>

</html>

MDBootstrap Treeview 无法按预期工作

MDBootstrap Treeview does not work as expected

html

css

asp.net

web

mdbootstrap