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" );  });});