jquery竖向三级菜单

jQuery是一款非常流行的Javascript库，它被广泛用于构建现代化的Web应用程序。其中之一就是竖向三级菜单的构建。接下来我们将介绍如何使用jQuery来创建这样的菜单。

  $(document).ready(function() {

    // 选中带有sub-menu类名的所有li元素
    $('li.sub-menu').hover(function() {

      // 当鼠标指向li元素时，添加active类名
      $(this).addClass('active');

      // 找到该li元素下的ul子元素，并显示出来
      $(this).find('ul').slideDown();

    },function() {

      // 当鼠标移开li元素时，移除active类名
      $(this).removeClass('active');

      // 找到该li元素下的ul子元素，并隐藏起来
      $(this).find('ul').slideUp();

    });

  });

这段代码会在文档加载完成后执行。它会找到带有sub-menu类名的所有li元素，并为它们添加hover事件。当鼠标移动到该元素上时，会为该元素添加active类名，并找到它下面的ul子元素将其slideDown；当鼠标离开该元素时，会移除active类名，并找到它下面的ul子元素将其slideUp。

通过这样的方式，我们可以创建出一个简单而美观的竖向三级菜单。我们可以根据需要，自己编辑CSS来控制菜单的样式。