当我单击 AdminLTE 3.0 中的子菜单时,如何折叠导航树视图?

Posted

技术标签:

【中文标题】当我单击 AdminLTE 3.0 中的子菜单时,如何折叠导航树视图?【英文标题】:How to collapsed nav-treeview when I click the submenu in AdminLTE 3.0? 【发布时间】:2022-01-08 21:55:05 【问题描述】:

当我单击子菜单时,您可以在 GIF 中看到它不再折叠。我想要的是当我点击子菜单时它会折叠并且当我点击页面时不会自动关闭

<li class="nav-item">
            <a href="#" class="nav-link <?= $page == 'patients.php' || $page == 'medical_history.php'? 'active':''?>">
              <i class="nav-icon fa fa-users-medical"></i>
              <p>Patients</p>
              <i class="fas fa-angle-left right"></i>
            </a>
            <ul class="nav nav-treeview <?= $page == 'patients.php' || $page == 'medical_history.php' ? 'show':''?>">
              <li class="nav-item">
                <a href="patients.php" class="nav-link <?= $page == 'patients.php' ? 'active':''?>">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Patient List</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="medical_history.php" class="nav-link <?= $page == 'medical_history.php' ? 'active':''?>">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Medical History</p>
                </a>
              </li>
            </ul>
          </li>

【问题讨论】:

【参考方案1】:

更新...

我已更新并提供了您需要的代码...只需将此代码复制并粘贴到文件的相关部分即可。我相信这对你有用:)

<li class="nav-item <?= $page == 'patients.php' || $page == 'medical_history.php' ? 'menu-open' : '' ?>">
  <a href="#" class="nav-link <?= $page == 'patients.php' || $page == 'medical_history.php' ? 'active' : '' ?>">
    <i class="nav-icon fa fa-users-medical"></i>
    <p>Patients</p>
    <i class="fas fa-angle-left right"></i>
  </a>
  <ul class="nav nav-treeview">
    <li class="nav-item">
      <a href="patients.php" class="nav-link <?= $page == 'patients.php' ? 'active' : '' ?>">
        <i class="far fa-circle nav-icon"></i>
        <p>Patient List</p>
      </a>
    </li>
    <li class="nav-item">
      <a href="medical_history.php" class="nav-link <?= $page == 'medical_history.php' ? 'active' : '' ?>">
        <i class="far fa-circle nav-icon"></i>
        <p>Medical History</p>
      </a>
    </li>
  </ul>
</li>

【讨论】:

这是我的参考adminlte.io/themes/v3/index3.html 好的,我知道了。这是您要做的...在li 元素中添加一个menu-open 类,紧跟在nav-item 类之后(这是示例代码的第一行)。 是的,它可以工作,但是当我打开仪表板作为示例时,它没有关闭 我认为我们需要在这里使用一些javascript?我猜 不需要js 你可以用PHP脚本来做。 Here 是你想要的 :)【参考方案2】:

如果您的 AdminLTE 模板使用 bootstrap,请尝试在 nav-treeview 类之后的嵌套 ul 元素中添加 collapseshow 类。

【讨论】:

你有任何示例代码吗,在导航链接类中添加折叠不起作用 collapsecollapsed 类之间存在差异。您必须在 ul 元素中添加两个类 collapseshow 并通过删除您的 PHP 脚本来尝试。【参考方案3】:

只需添加display: none

<ul class="nav nav-treeview" style="display: none;">

【讨论】:

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息,例如引用或文档,以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

以上是关于当我单击 AdminLTE 3.0 中的子菜单时,如何折叠导航树视图?的主要内容,如果未能解决你的问题,请参考以下文章

单击可扩展表视图中的子菜单时,我们可以导航到新视图吗?

侧边栏菜单在 Laravel+vue+adminlte 中不起作用

jquery下拉菜单,切换类

从ajax侧边栏加载的带有bootstrap-4动态侧边栏菜单的Adminlte 3打开不起作用

单击其他菜单项时隐藏当前子菜单

如何使用 bootstrap/adminlte 在链接单击时动态生成模式对话框?