直接上代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { font-family: Arial; font-size: 16px; } dl { width: 300px; } dl, dd { margin: 0; } dt { background-color: #ae8758; background-image: url(images/201207.png); background-repeat: no-repeat; background-position: 5px 13px; font-size: 18px; padding: 5px 5px 5px 20px; margin: 2px; height: 29px; line-height: 28px; } dt a { color: #FFF; text-decoration: none; } dd a { color: #000; } ul { list-style: none; padding: 5px 5px 5px 20px; margin: 0; } li { line-height: 24px; } .bg { background-position: 5px -16px; } </style> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("dd").hide(); $("dt a").click(function() { $(this).parent().toggleClass("bg"); $(this).parent().prevAll("dt").removeClass("bg"); $(this).parent().nextAll("dt").removeClass("bg"); $(this).parent().next().slideToggle(); $(this).parent().prevAll("dd").slideUp("slow"); $(this).parent().next().nextAll("dd").slideUp("slow"); return false; }); }); </script> </head> <body> <dl> <dt><a href="#">用戶列表</a></dt> <dd> <ul> <li> <a href="#">會員管理</a> </li> <li> <a href="#">用戶管理</a> </li> </ul> </dd> <dt><a href="#">視頻上傳</a></dt> <dd> <ul> <li> <a href="#">視頻管理</a> </li> <li> <a href="#">視頻上傳</a> </li> </ul> </dd> <dt><a href="#">信息查詢</a></dt> <dd> <ul> <li> <a href="#">修改信息</a> </li> <li> <a href="#">賬單查詢</a> </li> <li> <a href="#">退出登錄</a> </li> </ul> </dd> </dl> </body> </html>
效果展示如下：
jQuery 屬性 - toggleClass() 方法
定義和用法
toggleClass() 對設置或移除被選元素的一個或多個類進行切換。
該方法檢查每個元素中指定的類。如果不存在則添加類，如果已設置則刪除之。這就是所謂的切換效果。
不過，通過使用 "switch" 參數，您能夠規定只刪除或只添加類。
語法：
$(selector).toggleClass(class,switch)
prevAll() 方法
定義和用法
prevAll() 獲得當前匹配元素集合中每個元素的前面的同胞元素，使用選擇器進行篩選是可選的。
語法：
.prevAll(selector)