jQuery京東分類導航菜單

		$('.all-sort-list > .item').hover(function(){
			var eq = $('.all-sort-list > .item').index(this),		//獲取當前滑過是第幾個元素
				h = $('.all-sort-list').offset().top,			//獲取父菜單距離窗口多少像素 120px
				s = $(window).scrollTop(),				//獲取瀏覽器滾動了多少高度
				i = $(this).offset().top,				//當前鼠標滑過元素距離窗口多少像素
				item = $(this).children('.item-list').height(),		//下拉菜單子類內容容器的高度
				sort = $('.all-sort-list').height();			//父類分類列表容器的高度
			
			if ( item < sort ){						//如果子類的高度小於父類的高度
				if ( eq == 0 ){
					$(this).children('.item-list').css('top', (i-h));
				} else {
					$(this).children('.item-list').css('top', (i-h)+1);					
				}
			} else {
				if ( s > h ) {		//判斷子類的顯示位置,如果滾動的高度大於所有分類列表容器的高度
					if ( i-s > 0 ){	//則 繼續判斷當前滑過容器的位置 是否有一半超出窗口一半在窗口內顯示的Bug,
						$(this).children('.item-list').css('top', s-h);
					} else {
						$(this).children('.item-list').css('top', (s-h)-(-(i-s))+2 );
					}
				} else {
					$(this).children('.item-list').css('top', 0 );
				}
			}	

			$(this).addClass('hover');
			$(this).children('.item-list').css('display','block');
		},function(){
			$(this).removeClass('hover');
			$(this).children('.item-list').css('display','none');
		});

		$('.item > .item-list > .close').click(function(){
			$(this).parent().parent().removeClass('hover');
			$(this).parent().hide();
		});

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章