阅读量:0
要使用jQuery实现下拉菜单的多级展开，首先确保已经在HTML文件中引入了jQuery库。然后，可以通过以下步骤实现多级展开功能：
- 在HTML中创建一个具有多级结构的下拉菜单：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery 多级下拉菜单</title> <style> ul { list-style-type: none; padding: 0; } li { margin: 5px 0; } .sub-menu { display: none; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <ul> <li>菜单1 <ul class="sub-menu"> <li>子菜单1-1</li> <li>子菜单1-2</li> <li>子菜单1-3</li> </ul> </li> <li>菜单2 <ul class="sub-menu"> <li>子菜单2-1</li> <li>子菜单2-2</li> </ul> </li> <li>菜单3</li> </ul> <script> // 在这里编写jQuery代码 </script> </body> </html> - 编写jQuery代码以实现多级展开功能：
$(document).ready(function() { // 当点击一级菜单时，展开对应的子菜单 $('li').on('click', function() { // 隐藏所有子菜单 $('.sub-menu').hide(); // 获取当前点击的一级菜单的子菜单 var subMenu = $(this).find('.sub-menu'); // 如果子菜单存在，则展开子菜单 if (subMenu.length > 0) { subMenu.show(); } }); // 当点击子菜单时，阻止事件冒泡，以免触发一级菜单的点击事件 $('.sub-menu').on('click', function(event) { event.stopPropagation(); }); }); 现在，当点击一级菜单时，对应的子菜单将展开。点击子菜单时，不会展开其他子菜单。这样就实现了使用jQuery实现的下拉菜单多级展开功能。
