首页上机内容1. 利用jQuery实现网页元素的访问；2. 利用jQuery实现对网页事件的响应；3. 利用jQuery实现多级菜单功能：选中时展开子菜单，并收起其它的子菜单。三、要求1. 在单独的js文件中实现JS代码；以index.html为入口，具体代码实现，完整版

上机内容1. 利用jQuery实现网页元素的访问；2. 利用jQuery实现对网页事件的响应；3. 利用jQuery实现多级菜单功能：选中时展开子菜单，并收起其它的子菜单。三、要求1. 在单独的js文件中实现JS代码；以index.html为入口，具体代码实现，完整版

时间: 2024-02-29 15:53:26 浏览: 59

好的，以下是一个完整的示例代码，包括HTML、CSS和JS部分，你可以参考一下： HTML部分： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>多级菜单</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul class="menu"> <li>菜单1 <ul> <li>子菜单1</li> <li>子菜单2</li> <li>子菜单3</li> </ul> </li> <li>菜单2 <ul> <li>子菜单1</li> <li>子菜单2</li> <li>子菜单3</li> </ul> </li> <li>菜单3 <ul> <li>子菜单1</li> <li>子菜单2</li> <li>子菜单3</li> </ul> </li> </ul> <script src="jquery.min.js"></script> <script src="script.js"></script> </body> </html> ``` CSS部分： ```css .menu { list-style: none; padding: 0; margin: 0; } .menu > li { display: inline-block; padding: 10px; position: relative; } .menu ul { display: none; position: absolute; top: 100%; left: 0; margin: 0; padding: 0; } .menu ul li { display: block; padding: 10px; } .menu ul ul { left: 100%; top: 0; } ``` JS部分： ```javascript $(document).ready(function(){ // 选中菜单项时展开子菜单 $('.menu > li').click(function(){ $(this).children('ul').slideToggle(); $(this).siblings().children('ul').slideUp(); }); }); ``` 这段代码的作用是，当用户点击菜单项时，会展开其子菜单，同时收起其他菜单项的子菜单。需要注意的是，这只是一个简单的示例代码，你需要将其根据你的具体需求进行修改和完善。同时，为了避免与其他代码冲突，建议将其放到单独的js文件中，并在HTML文件中引用。

阅读全文