文章/答案/技术大牛

发布

社区首页 >问答首页 >动态AJAX侧边栏菜单jquery在adminlte-3引导程序中加载页面后加载-4 treeview打开/隐藏不工作

问动态AJAX侧边栏菜单jquery在adminlte-3引导程序中加载页面后加载-4 treeview打开/隐藏不工作
EN

Stack Overflow用户

提问于 2021-11-25 04:13:33

回答 1查看 693关注 0票数 0

我想使用adminlte 3仪表板中的AJAX和引导4仪表板从数据库中绘制动态侧栏菜单数据。当我使用AJAX动态加载侧栏菜单数据时，侧栏打开或折叠不起作用。当静态数据在没有ajax的情况下推到'.sidebar‘类时，菜单打开/隐藏工作。但是使用ajax调用treeview菜单打开/隐藏不起作用。

$(document).ready(function(){
  var url = "";
    $.ajax({
    url: url,
  }).done(function(resp){
    //retrive data
    var ret = '<nav class="mt-2"><ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="true"><li class="nav-item"><a href="#" class="nav-link"><i class="nav-icon fas fas fa-user"></i><p>Admin<i class="right fas fa-angle-left"></i></p></a><ul class="nav nav-treeview"><li class="nav-item"><a href="#add-order.php" class="nav-link"><i class="far fa-circle nav-icon"></i><p>Rahim</p></a></li></ul><ul class="nav nav-treeview"><li class="nav-item"><a href="#" class="nav-link"><i class="far fa-circle nav-icon"></i><p>Test</p></a></li></ul></li></ul></nav>';
    $('.sidebar').html(ret);
  });
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<body class="sidebar-mini sidebar-closed sidebar-collapse" style="height: auto;">


<!-- Site wrapper -->
<div class="wrapper">
  <!-- Navbar -->
  <nav class="main-header navbar navbar-expand navbar-primary navbar-dark">
    <!-- Left navbar links -->
    
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
      </li>
      <!--
      <li class="nav-item d-none d-sm-inline-block">
        <a href="#" class="nav-link">Home</a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="#" class="nav-link">Contact</a>
      </li>
      -->
    </ul>
    

    <!-- Right navbar links -->
    <ul class="navbar-nav ml-auto">
      <li class="nav-item dropdown user-menu">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
          <img src="public/images/login_man.png" class="user-image img-circle elevation-2" alt="User Image">
          <span class="d-none d-md-inline">admin</span>
        </a>
        <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
          
 
          
          <!-- Menu Footer-->
          <li class="user-footer">
            <!--<a href="#" class="btn btn-default btn-flat">Profile</a>-->
            <a href="logout.php" class="btn btn-danger btn-flat float-right">Sign out</a>
          </li>
        </ul>
      </li>
      <!--
      <li class="nav-item">
        <a class="nav-link" data-widget="fullscreen" href="#" role="button">
          <i class="fas fa-expand-arrows-alt"></i>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
          <i class="fas fa-th-large"></i>
        </a>
      </li>
      -->
    </ul>
  </nav>
  <!-- /.navbar --><aside class="main-sidebar main-sidebar-custom sidebar-dark-primary elevation-4">
    <a href="#" class="brand-link">
        <i class="brand-image fas fa-tachometer-alt" style="opacity: .8"></i>
        <span class="brand-text font-weight-light">Dashboard</span>
    </a>
    <div class="sidebar">
    </div>
</aside>
<div class="container-fluid">
    <div class="content-wrapper" style="min-height: 549px;">

    </div>
  </div>
</div>
</body>

javascript

jquery

ajax

bootstrap-4

adminlte

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-11-25 16:37:06

只要将代码放在成功函数之后，它就能工作了。

$('[data-widget="treeview"]').Treeview('init');

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70105730

复制

相似问题

问动态AJAX侧边栏菜单jquery在adminlte-3引导程序中加载页面后加载-4 treeview打开/隐藏不工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动态AJAX侧边栏菜单jquery在adminlte-3引导程序中加载页面后加载-4 treeview打开/隐藏不工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动态AJAX侧边栏菜单jquery在adminlte-3引导程序中加载页面后加载-4 treeview打开/隐藏不工作
EN