首页jquery实现左侧菜单

jquery实现左侧菜单

时间: 2024-01-25 19:11:41 浏览: 86

以下是使用jQuery实现左侧菜单的示例代码： ```html <!DOCTYPE html> <html> <head> <title>左侧菜单</title> <style> .menu { list-style: none; padding: 0; } .menu li { cursor: pointer; } .submenu { display: none; list-style: none; padding: 0; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $('.menu li').click(function() { $(this).children('.submenu').slideToggle(); }); }); </script> </head> <body> <ul class="menu"> <li>菜单1 <ul class="submenu"> <li>子菜单1</li> <li>子菜单2</li> <li>子菜单3</li> </ul> </li> <li>菜单2 <ul class="submenu"> <li>子菜单4</li> <li>子菜单5</li> <li>子菜单6</li> </ul> </li> <li>菜单3 <ul class="submenu"> <li>子菜单7</li> <li>子菜单8</li> <li>子菜单9</li> </ul> </li> </ul> </body> </html> ``` 这段代码实现了一个简单的左侧菜单，点击菜单项时，对应的子菜单会展开或收起。点击菜单项后，子菜单会以滑动的方式展开或收起。

阅读全文