AdminLTE 3 导航关闭菜单项单击

AdminLTE 3 是一个流行的 Bootstrap 管理面板模板。该模板提供了多种功能和组件，例如导航菜单，表格，表单等。其中之一就是导航关闭菜单项单击，本文将介绍如何实现该功能。

1. 环境要求

• AdminLTE 3
• jQuery

2. 实现步骤

步骤1: 创建导航菜单

在你的 HTML 页面上创建一个导航菜单。使用 AdminLTE 3 的导航菜单模板可以更轻松的实现这个步骤。以下是一个简单的示例：

<aside class="main-sidebar">
  <nav class="navigation">
    <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
      <li class="nav-item">
        <a href="#" class="nav-link">
          <i class="nav-icon fas fa-th"></i>
          <p>
            Dashboard
          </p>
        </a>
      </li>
      <li class="nav-header">EXAMPLES</li>
      <li class="nav-item">
        <a href="#" class="nav-link">
          <i class="nav-icon fas fa-cog"></i>
          <p>
            Settings
          </p>
        </a>
      </li>
    </ul>
  </nav>
</aside>

步骤2: 添加代码

添加以下 JavaScript 代码到你的页面中，它将监听导航菜单上的点击事件并自动关闭菜单。

$(document).ready(function(){
  // Add click event listener to navbar submenu items
  $('.nav-sidebar .nav-item').on('click', function(){
    // Check if the link is collapsed
    if($(this).hasClass('has-treeview')){
      // Get the collapsible menu element
      var submenu = $(this).find('.nav-treeview');
      
      // Check if menu is already collapsed
      if(submenu.is(':visible')){
        // Collapse menu
        submenu.slideUp();
        $(this).removeClass('menu-open');
      }
      else{
        // Collapse other expanded menus
        $('.nav-sidebar .nav-treeview').slideUp();
        $('.nav-sidebar .nav-item').removeClass('menu-open');
        
        // Expand menu
        submenu.slideDown();
        $(this).addClass('menu-open');
      }
      return false;
    }
  });
});

3. 总结

在本文中，我们介绍了如何实现 AdminLTE 3 导航关闭菜单项单击功能。通过实现该功能，可以提高用户体验并简化用户界面。无需再手动关闭菜单，导航菜单会自动关闭。