前端培訓(xùn)：添加折疊特效

　　在menu.html中添加jQuery代碼，實(shí)現(xiàn)菜單的折疊特效。

　　menu.html 圖2-17 靜態(tài)頁(yè)面效果

<script src="js/jquery-1.12.4.js"></script>
<script>
    //隱藏所有二級(jí)菜單
    $('.menu-head + div').hide();
    //顯示當(dāng)前，隱藏其他
    $('.menu-head').click(function() {
       //設(shè)置當(dāng)前菜單右側(cè)圖標(biāo)樣式 
       $(this).css('backgroundImage', 'url(img/pro_down.png)');
       //顯示當(dāng)前菜單對(duì)應(yīng)的子菜單
       $(this).next('div').show();
       //獲取其他菜單外層的li元素
       var parentli = $(this).parent('li');
       var lis = parentli.siblings('li');
       //找到每個(gè)li元素下的主菜單，設(shè)置主菜單右側(cè)圖標(biāo)樣式
       lis.children('p').css('backgroundImage',
                             'url(img/pro_left.png)');
       //隱藏其他主菜單下的子菜單
       lis.children('div').hide();
    });
</script>

　　上述代碼中，選擇器“.menu——head+div”可獲取所有菜單項(xiàng)下的子菜單，調(diào)用jQuery提供的hide()方法即可完成所有子菜單的隱藏。然后在class值為menu——head的元素上注冊(cè)單擊事件，每當(dāng)單擊事件被觸發(fā)時(shí)，執(zhí)行第7～18行代碼進(jìn)行相關(guān)的處理。

　　下面分別對(duì)第7～18行代碼進(jìn)行重點(diǎn)講解，具體如下所示。

　　·第8行使用css()方法設(shè)置被單擊的p元素的圖標(biāo)。

　　·第10行使用next()方法找到p元素下的div元素，并調(diào)用jQuery提供的show()方法顯示匹配到的元素。

　　·第12行使用parent()方法找到p元素上級(jí)的li元素，并使用變量parentli保存。

　　·第13行使用parentli調(diào)用siblings()方法找到其他同級(jí)的li元素，即一級(jí)菜單。

　　·第15行使用children()方法找到同級(jí)li元素的子元素p，并使用css()方法設(shè)置要顯示的圖標(biāo)。

　　·第18行使用children()方法獲取同級(jí)li元素下的div元素，并調(diào)用jQuery提供的hide()方法隱藏匹配到的元素。

　　添加上述jQuery代碼后，本案例的全部代碼已經(jīng)給出，測(cè)試方法讀者可以參考案例展示。