MDBootstrap 树视图无法按预期工作

Posted

技术标签:

【中文标题】MDBootstrap 树视图无法按预期工作【英文标题】：MDBootstrap Treeview does not work as expected 【发布时间】：2022-01-09 18:31:04 【问题描述】：

我在我的 ASP .NET Core Web 应用程序中为树视图使用了 MDBootstrap 解决方案。在这个LINK 上是如何将树视图插入我的项目的详细教程。这就是我所拥有的一切。

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

这就是它的行为方式

补充一点：这些项目是不可点击的，基本上没有交互是可能的。它只是一个静态文本。从上面提到的链接中，我想使用动画链接。

这里有什么我遗漏的吗？

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

非常感谢。

【问题讨论】：

【参考方案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 树视图无法按预期工作的主要内容，如果未能解决你的问题，请参考以下文章

自动布局无法按预期工作

空 UIView 上的自动布局约束无法按预期工作

用于水平滚动的 UIScrollView 内的 UITableView 无法按预期工作

UIScroll 视图未按预期工作

带有底部工作表的 Motionlayout 无法按预期工作

ScrollView 中的 ScrollTo 无法按预期工作