jQuery CSS는 메뉴 슬라이딩 확장 및 축소를 구현합니다(Taobao 모방)_jquery

기능은 매우 실용적이고 코드는 매우 간단합니다

효과 1.

효과 2.

스타일 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,br,pre,form,fieldset,input,textarea,p,blockquote ,th,td{
여백:0;
패딩:0
}
span{
color:#FF2B13
}
a{
텍스트 장식: 없음;
색상:#515050
}
a:hover{
텍스트 장식:밑줄
색상:빨간색
}
.box_all{
오버플로: 숨겨진;
너비:350px;
글꼴-가족:"Microsoft Yahei"; F57A04;
padding:0 0 10px 0;
여백:0 auto
}
.box{
padding-left:45px
padding-top:5px
}
.box li{
line-height:20px;
width:120px
float:left; >list-style- 유형:없음
}
.boxdown{
cursor:pointer;
border:1px solid #EEEEEE
width:60px>height:14px; 🎜>배경:# FFFFFF url(../images/down.png) 반복 없음 20px;
margin-left:150px
margin-top:-2px
border-top:none;
여백: 0 자동
}
.up{
커서:포인터;
테두리: 1px #EEEEEE
너비: 60px
높이: 14px; >배경:#FFFFFF url(../images/up.png) 반복 없음 20px;
margin-left:150px;
margin-top:-2px
border-top:none; 🎜>margin:0 auto
}


주요 js 코드는 다음과 같습니다.




코드 복사


코드는 다음과 같습니다.

$(document).ready(function(){

var a =$(".box ul li:gt(3):not( :last)"); a.hide(); $(".boxdown").click(function(){ if(a.is(':visible')){ a.slideUp('fast'); $(this).removeClass('up') }else{

a.slideDown('fast').show(); $(this).addClass('up') ;

}
})