全國(guó)咨詢(xún)/投訴熱線:400-618-4000

首頁(yè)技術(shù)文章正文

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

更新時(shí)間:2022-03-21 來(lái)源:黑馬程序員 瀏覽量:

  在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è)試方法讀者可以參考案例展示。


分享到:
在線咨詢(xún) 我要報(bào)名
和我們?cè)诰€交談!