> 웹 프론트엔드 > JS 튜토리얼 > jQuery CSS는 메뉴 슬라이딩 확장 및 축소를 구현합니다(Taobao 모방)_jquery

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

WBOY
풀어 주다: 2016-05-16 17:39:34
원래의
1410명이 탐색했습니다.

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

효과 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') ;
}
})


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿