Javascript AdminLTE中侧栏多级菜单的悬停效果

我在AdminLTE的侧栏多级下拉菜单中添加了悬停效果[默认操作是单击以展开它]

这是可行的，但问题是如果进入第3级，跳出表单会折叠整个菜单，而这不是我想要的，如果我跳出第3级，它应该只折叠第3级，而不是第1级和第2级

下面是它的js代码：

$('.treeview').hover(function () {
    var _this = $(this);
    if(!(_this.hasClass('active'))){
      _this.addClass('active');
      _this.children().find('treeview-menu').addClass('menu-open');
    } else{
      _this.removeClass('active');
      _this.children().find('treeview-menu').removeClass('menu-open');
    }
  }) 

这就是HTML的结构：

<ul class="sidebar-menu" data-widget="tree">
        <li class="header">MAIN NAVIGATION</li>
        <li class="treeview">
          <a href="#">
            <i class="fa fa-share"></i> <span>Multilevel</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
            <li class="treeview">
              <a href="#"><i class="fa fa-circle-o"></i> Level One
                <span class="pull-right-container">
                  <i class="fa fa-angle-left pull-right"></i>
                </span>
              </a>
              <ul class="treeview-menu">
                <li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
                <li class="treeview">
                  <a href="#"><i class="fa fa-circle-o"></i> Level Two
                    <span class="pull-right-container">
                      <i class="fa fa-angle-left pull-right"></i>
                    </span>
                  </a>
                  <ul class="treeview-menu">
                    <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
                    <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
          <ul class="treeview-menu">
            <li class="treeview">
              <a href="#"><i class="fa fa-circle-o"></i> Level One
                <span class="pull-right-container">
                  <i class="fa fa-angle-left pull-right"></i>
                </span>
              </a>
              <ul class="treeview-menu">
                <li class="treeview">
                  <a href="#"><i class="fa fa-circle-o"></i> Level Two
                    <span class="pull-right-container">
                      <i class="fa fa-angle-left pull-right"></i>
                    </span>
                  </a>
                  <ul class="treeview-menu">
                    <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
                    <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
                  </ul>
                </li>
              </ul>
              <ul class="treeview-menu">
                <li class="treeview">
                  <a href="#"><i class="fa fa-circle-o"></i> Level Two
                    <span class="pull-right-container">
                      <i class="fa fa-angle-left pull-right"></i>
                    </span>
                  </a>
                  <ul class="treeview-menu">
                    <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
                    <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="https://adminlte.io/docs"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
        <li class="header">LABELS</li>
        <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
        <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
        <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
      </ul>

主导航





































标签

这是同样的理由。只需将鼠标悬停在多级下拉菜单上，然后转到第3级并尝试将鼠标移离它，它将折叠整个菜单，并且我无法检查它下面的其他子级菜单

希望你能理解这个问题

如何解决此问题

---

提前感谢您的帮助。

它不应该这样做吗，你们正在编写悬停事件的代码，当它失去焦点时，它将崩溃，这是一个很好的解决方案？？我只想要悬停效果。不要说你只想要悬停效果（它现在把我们的想法带到了完全的方向上），你应该说你想要它在按钮悬停上作为一个解决方案，你可以使用引导折叠功能和垂直导航的混合，它不应该这样做吗，你们正在编写悬停事件的代码，当它失去焦点时，它将崩溃，这是一个很好的解决方案？？我只想要悬停效果。不要说你只想要悬停效果（它现在把我们的想法带向了完全的方向），你应该说你想要按钮悬停作为一个解决方案，你可以使用引导折叠功能和垂直导航栏的混合