오늘은 왼쪽 메뉴 효과를 만들어 봤습니다. 이 효과는 백그라운드에서 작업할 때 자주 사용하면 좋을 것 같습니다. 코드도 간결하고 명확하게 복사해서 사용하시면 됩니다. 효과 그림은 다음과 같습니다. 코드는 다음과 같습니다. (상하 화살표 아이콘은 위와 같으며, 아이콘은 직접 변경 가능) 코드 복사 코드는 다음과 같습니다. Equiv="Content-Type" content="text/html; charset=gb2312" / > 배경에서 왼쪽 메뉴를 클릭하고 위아래로 슬라이드하여 jquery ; <br>$(function(){ <br>$(".box dt:first").addClass ("활성"); <br>$(".box dd:not(:first)").hide (); <br>$(".box dt").click(function(){ <br>$ (this).next("dd").slideToggle() <br>.siblings("dd"). SlideUp();$(this).toggleClass('active') <br>.siblings(" dt").removeClass("active") <br>}); > <br>* { padding:0; margin:0 } <br>body { padding:100px "宋体" ; } <br>dl,dt,dd{list-style:none;} <br>.box { 너비:500px; border-bottom:1px 솔리드 #CCC } <br>.box dt { 높이:30px; -height:30px; padding:0 10px; 커서:포인터; border:1px solid # ccc; border-bottom:none; 배경:#eee url(img/bg.gif) 오른쪽 27px; } <br>.box dt.active { 배경 위치:오른쪽 7px } <br>.box dd { border-left:1px solid #ccc; } <br>.box dd p{line-height:20px; <br> 제목 1 a> 두 번째 항목 세 번째 항목 제목 2 a href="#">첫 번째 항목< ;/p> 두 번째 항목 제목 3 첫 번째 항목> 항목< /p> 세 번째 항목> 제목 4 첫 번째 항목 ;p>< ;a href="#">두 번째 항목 세 번째 항목> p>