小白進階模組2———導航欄的簡單製作以及未來元素的使用
1.功能介紹:
通過點選標題會展開或隱藏相應的介面,並且+ 與 - 會做出相應的轉化
1.1.核心程式碼:
1/*顯示隱藏*/ 2$(this).closest(".lh1").find(".lh12").show(); 3$(this).closest(".lh1").siblings().find(".lh12").hide(); 4/*+ -lh11*/ 5$(this).find("span").empty().text("-"); 6$(this).closest(".lh1").siblings().find( 7".lh11 span").empty().text("+");
2.功能介紹:
通過點選一個div裡的元素,在另外一個div裡新增一個元素(本例是以克隆元素),在通過相應操作來清除改元素以達到導航效果。
2.1核心程式碼:
$('.nk').click( function() { $('.righthand').append( $(this).clone().toggleClass('rh').find( 'spon').empty().text('*').closest( '.rh')); }) $('.rh').click(function() { $(this).closest('.rh').remove(); }) $(document).on('click','.rh',function(){ $(this).closest('.rh').remove(); })
3.注意事項:
該例因為克隆之後的元素是未來元素,無法直接對其進行操作,需用.on()方法。