jQuery はカスケード メニュー効果を実装します (淘宝網ホームページのメニュー アニメーションの模倣)_jquery

@CHARSET "UTF-8";

*{
マージン: 0px;
パディング: 0px;

}

ul,li{
list-style-type: none;

}

.menu{
幅: 190px;
境界線: 1 ピクセルの赤い実線。
背景色: #fffdd2;
}

.optn{
幅: 190px;
行の高さ: 28px;
border-top: 1 ピクセルの赤い破線。

}


.content{
padding-top:10px;
クリア: 左;
}


a{
テキスト装飾: なし;
カラー: #666;
パディング: 10px;
}
.optnFocus{
背景色: #fff;
フォントの太さ: 太字;

}

div{
パディング: 10px;
}

.tip{
幅: 190px;
ボーダー: 2 ピクセルの赤い実線。
位置: 絶対。
背景色: #fff;
表示: なし。
}

.tip li{
line-height: 23px;
}

$(function(){

var curY;//获取所選択のTOP
var curH;//获取所選択の高さ
var curW;//取るべき幅
var objL;//取当前オブジェクト

//取当前位置に使用される独自関数数
function setInitValue(obj){
curY=obj.offset().top;
curH=obj.height();
}

//设前所项的ネズミ标滑動イベント
$(".optn").mouseover(function(){
objL=$(this);//获取当前对オブジェクト
setInitValue(objL);
var allY=curY- curH "px";

objL.addClass("optnFocus");
//获取气元素の下一个ul
$(".tip",this).show()。 css({"top":allY,"left":curW});;

});
$(".optn").mouseout(function(){

$(this).removeClass("optnFocus");
$(".tip",this).hide();

//のため子菜单時子菜单不见，我们也要子菜单設置鼠标イベント

$(".tip").mouseover(function(){

$(this).show() ;
objL=$(this).prev("li");
setInitValue("optnFocus"); $(".tip").mouseout(function(){
$(this).hide();
$(this).prev("li").removeClass("optnFocus");

})
});


注意要点:

1. 私が使用しているのはより高いバージョンの jquery 文書であるため、一部のメソッドはサポートされていません (例: 次の要素の最初の部分)子元素next(erp)、10.1ではサポートされていないため、私はある方法を変更しました$(chiled,select)、selectの範囲で実行元素の選択

2.統合効果の実行を示します