需求：實現側邊欄下拉菜單
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>菜單實例</title> <style> ul { padding:0; margin:0; list-style: none; } .nav { width: 120px; } .nav h2 { margin:0; font-size: 16px; font-weight: normal; padding: 0px 20px; height: 40px; line-height: 40px; border:1px solid #999; border-bottom:none; background: #369; cursor: pointer; } .nav ul { border:1px solid #999; height: 0px; border-width:0px; overflow: hidden; transition:all .5s; } .nav ul.active { height: 125px; border-width: 1px; } .nav li a{ color:#333; font-size: 14px; text-align: center; text-decoration: none; display: block; padding: 0px 20px; height: 30px; line-height: 30px; border-bottom:1px solid #999; } .nav li:last-child a { border-bottom:none; } </style> </head> <body> <h1>后台管理</h1> <hr> <div class="nav"> <h2>用戶管理</h2> <ul> <li><a href="#">用戶列表</a></li> <li><a href="#">用戶添加</a></li> <li><a href="#">用戶刪除</a></li> <li><a href="#">用戶修改</a></li> </ul> <h2>訂單管理</h2> <ul> <li><a href="#">訂單列表</a></li> <li><a href="#">訂單添加</a></li> <li><a href="#">訂單刪除</a></li> <li><a href="#">訂單修改</a></li> </ul> <h2>商品管理</h2> <ul> <li><a href="#">用戶列表</a></li> <li><a href="#">用戶添加</a></li> <li><a href="#">用戶刪除</a></li> <li><a href="#">用戶修改</a></li> </ul> <h2>評論管理</h2> <ul> <li><a href="#">用戶列表</a></li> <li><a href="#">用戶添加</a></li> <li><a href="#">用戶刪除</a></li> <li><a href="#">用戶修改</a></li> </ul> </div> <script src="../jquery-3.3.1.js"></script> <script> $(function(){ $('.nav h2').on('click', function(){ $(this).next('ul').toggleClass('active') }) }) </script> </body> </html>