page encoding = " UTF-8 " % & gt；
& lt！DOCTYPE？html？公？“-//W3C//DTD？HTML？4.01?過渡//EN”？" http://www . w3 . org/TR/html 4/loose . dtd & amp；quot& gt
& lthtml & gt
& lthead & gt
& ltmeta？http-equiv="Content-Type "？content = " text/html；？charset=UTF-8 " >
& lttitle & gt插入？標題？這裏& lt/title & gt；
& lt風格？type="text/css " >
#菜單？{?
寬度:300px？
}
。has_children{
背景？:?#555;
顏色？:# fff
光標:指針；
}
。高亮{
顏色？:?# fff
背景？:?綠色；
}
部門{
填充:0；
}
div？壹個{
背景？:?#888;
展示？:?無；
浮動:左；
寬度:300px
}
& lt/style & gt；
& lt劇本？type="text/javascript "？src = " jquery-1 . 8 . 1 . js " >& lt/script & gt；
& lt劇本？type = " text/JavaScript " & gt；
$(function(){
$(".有_孩子？span”)。單擊(函數(){
$(這個)。兄弟姐妹()。show()；
//隱藏其他div元素的子元素。
$(這個)。父級()。兄弟姐妹()。find("a ")。hide()；
//為平移父元素div添加樣式。
$(這個)。父級()。addClass(" highlight ")；
//
$(這個)。父級()。兄弟姐妹()。removeClass("高亮")；
});
});
& lt/script & gt；
& lt/head & gt；
& ltbody & gt
& ltdiv？id = " menu " & gt
& ltdiv？class="has_children " >
& ltspan & gt用戶管理
& lta & gt添加用戶
& lta & gt更新用戶
& lta & gt刪除用戶
& lta & gt查詢用戶
& lt/div & gt；
& ltdiv？class="has_children " >
& ltspan & gt權限管理
& lta & gt創建權限
& lta & gt更改權限
& lta & gt分配權限
& lta & gt瀏覽權限
& lt/div & gt；
& ltdiv？class="has_children " >
& ltspan & gt產品管理
& lta & gt添加產品
& lta & gt刪除產品
& lta & gt瀏覽產品
& lta & gt更新產品
& lt/div & gt；
& lt/div & gt；
& lt/body & gt；
& lt/html & gt；
這是大致的效果圖。我的沒有加小三角，功能基本實現了。當我點擊第壹個菜單時，2和3都被收起來了。當我點擊第二個菜單時，1和3自動收起，其他的也壹樣。