jQuery縱嚮導航菜單效果實現方法，jquery導覽功能表

jQuery縱嚮導航菜單效果實現方法，jquery導覽功能表

本文執行個體講述了jQuery縱嚮導航菜單效果實現方法。分享給大家供大家參考，具體如下：

效果如下：

核心代碼如下：

$( document ).ready( function(e){  var $catCont = $( ".cat-cont" );  //二級菜單div  var $catList = $( ".J_Cat" );    //一級菜單li  $catList.on( "mouseenter", function(){    var index = $( this ).index();    var $curCatList = $( ".cat-cont-bd>li:eq(" + index + ")" );     //滑鼠移上去對應的二級菜單的li    $catList.removeClass( "selected selected-prev" );    $( this ).addClass( "selected" ).prev().addClass( "selected-prev" );    $catCont.show();    $curCatList.css( "display", "list-item").siblings().css( "display", "none" );    var viewHeight = $( window ).height();    var catOffsetTop = $( this ).offset().top - $( window ).scrollTop();    var catBottomGap = viewHeight - catOffsetTop;    var catPositionTop = $( this ).position().top;    var catContHeight = $catCont.height();    if( catBottomGap >= catContHeight ) {      $catCont.css( "top", catPositionTop );    }    if( catBottomGap < catContHeight && viewHeight >= catContHeight ) {      $catCont.css( "top", catPositionTop - ( catContHeight - catBottomGap ) - 20 );    }    if( catBottomGap < catContHeight && viewHeight < catContHeight ) {      $catCont.css( "top", catPositionTop );    }    if( catBottomGap <= 66 ) {      $catCont.css( "top", catPositionTop - catContHeight + 33 );    }  }).on( "mouseleave", function( event ){    if( !$( event.relatedTarget ).hasClass( "cat-cont-bd" ) ){  //互動災難:離開一級菜單劃不到二級菜單，如何知道離開一級菜單後進入的是二級菜單？jquery提供屬性：event.relatedTarget(離開後進入的對象)      $( this ).removeClass( "selected selected-prev" );      $catCont.hide();    }  });  $catCont.on( "mouseleave", function(){    $catCont.hide();    $catList.removeClass( "selected selected-prev" );  });});