Блог

Главная - Вопросы по программированию - MDBootstrap Treeview работает не так, как ожидалось

MDBootstrap Treeview работает не так, как ожидалось

#html #css #asp.net #web #mdbootstrap

#HTML #css #asp.net #веб #mdbootstrap

Вопрос:

Я использовал решение MDBootstrap для представления дерева в моем веб-приложении ASP .NET Core. По этой ссылке находится подробное руководство по вставке 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,700amp;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,700amp;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>

Комментарии:

1. это помогло … большое спасибо 🙂

Метки: ,