jQuery實現的手風琴側邊菜單效果

第jQuery實現的手風琴側邊菜單效果本文實例講述了jQuery實現的手風琴側邊菜單效果。分享給大家供大家參考，具體如下：

動手做了一個簡單手風琴菜單，上圖：

點擊B可收縮C列表，點擊C改變自身和父節(jié)點B的樣式，懸浮時均有不同的樣式改變。

先看頁面代碼，列表的嵌套：

divid="menuDiv"

ulid="menu"

spanB/span

lispanC/span/li

lispanC/span/li

lispanC/span/li

/ul

/li

spanB/span

lispanC/span/li

lispanC/span/li

lispanC/span/li

/ul

/li

spanB/span

lispanC/span/li

lispanC/span/li

lispanC/span/li

/ul

/li

/ul

/div

css代碼，主要設置背景色和子菜單左邊框的樣式，設置懸浮和選中的樣式，開始設置子菜單不顯示（通過js設置點擊之后再顯示）：

#menuDiv{

width:200px;

background-color:#029FD4;

.parentLi

width:100%;

line-height:40px;

margin-top:1px;

background:#1C73BA;

color:#fff;

cursor:pointer;

font-weight:bolder;

.parentLispan

padding:10px;

.parentLi:hover,.selectedParentMenu

background:#0033CC;

.childrenUl

background-color:#ffffff;

display:none;

.childrenLi

width:100%;

line-height:30px;

font-size:.9em;

margin-top:1px;

background:#63B8FF;

color:#000000;

padding-left:15px;

cursor:pointer;

.childrenLi:hover,.selectedChildrenMenu

border-left:5px#0033CCsolid;

background:#0099CC;

padding-left:15px;

接下來就是點擊事件的代碼：

$(".parentLi").click(function(event){

$(this).children('.childrenUl').slideToggle();

$(".childrenLi").click(function(event){

event.stopPropagation();

$(".childrenLi").removeClass('selectedChildrenMenu');

$(".parentLi").removeClass('selectedParentMenu');

$(this).parents(".parentLi").addClass('selectedParentMenu');

$(this).addClass('selectedChildrenMenu');

需要注意的是列表嵌套，會導致事件冒泡，所以在子菜單的點擊事件里面要組織冒泡，event.stopPropagation();詳見API

更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery表格(table)操作技巧匯總》、《jQuery切換特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、