jQuery implémente l'effet de menu en cascade (imitation de l'animation du menu de la page d'accueil de Taobao)_jquery

>menu.html

description" content =" ceci est ma page">


< link rel= "stylesheet" type="text/css" href="../css/menu.css">



< /head>

🎜>Produits numériques informatiques

@CHARSET "UTF-8" ;

*{
marge : 0px ;
remplissage : 0px ;

}

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

}

.menu{
largeur : 190 px ;
bordure : 1px rouge solide ;
couleur de fond : #fffdd2 ;
}

.optn{
largeur : 190 px ;
hauteur de ligne : 28 px ;
border-top : 1px en pointillés rouges ;

}


.content{
padding-top:10px;
clair : gauche ;
}


a{
text-decoration : aucun ;
couleur : #666 ;
rembourrage : 10 px ;
}
.optnFocus{
couleur de fond : #fff;
font-weight : gras ;

}

div{
remplissage : 10px ;
}

.tip{
largeur : 190 px ;
bordure : 2px rouge solide ;
position : absolue ;
couleur de fond : #fff ;
affichage : aucun ;
}

.tip li{
hauteur de ligne : 23px ;
}

$(function(){

var curY;//获取所选想的TOP
var curH;//获取所选的Hauteur
var curW;//获取所选的width
var objL;//获取当前对象

//自定义函数用于获取当前位置
function setInitValue(obj ){
curY=obj.offset().top;
curH=obj.height();
curW=obj.width();

//设置当前所选项的鼠标滑动事件
$(".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(objL);
objL.addClass("optnFocus"); $(".tip").mouseout(function(){
$(this).hide();
$(this).prev("li").removeClass("optnFocus");

});
});


注意要点：

1.由于我们用的是较高版本的jquery文件库，所以有些方法是不支持的，例如获取下一个元素的第一个子元素next(erp),在10.1中是不支持的，所以我换了一种方法$(chiled,select),表示在select的范围进行元素的选择
2.整个效果的实现