jquery 회전 표시 첫 번째 작은 example

jquery 회전 표시 첫 번째 작은 example_jquery

WBOY

풀어 주다： 2016-05-16 18:26:56

원래의

1051명이 탐색했습니다.

효과는 아래 사진과 같습니다.
jquery 회전 표시 첫 번째 작은 example_jquery
예제를 읽고 직접 작성했지만(그냥 스스로에게 격려라고 생각해주세요!)
jquery

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

 
$(document).ready (function(){ 
var h3=$(".accordion h3"); 
$(".accordion h3:eq(0)").addClass("active");//1. 먼저 가져오기 첫 번째 H3 태그 및 클래스 추가; { 
$(this).next("p").slideToggle("slow")//애니메이션을 추가할 다음 p 태그를 찾고, 형제 노드가 표시되는지 확인하고 표시되면 숨깁니다. 
.siblings("p :visible").fadeOut("slow"); 
$(this).toggleClass("active");//H3 태그에 클래스를 추가합니다(있는 경우 있는 경우 추가), 형제 노드를 찾아 제거합니다. class 
$(this).siblings("h3").removeClass("active") 
}); 

 

css

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

여백: 10px auto;

너비: 570px; 
글꼴: 75%/120% Arial, Helvetica, sans-serif; 아코디언 { 
너비: 480px; 
국경 바닥: 단색 1px #c4c4c4; 
} 
.accordion h3 { 
배경: #e9e7e7 url(images/arrow-square.gif) 없음 -오른쪽으로 반복 -51px; 
여백: 7px 15px; 
글꼴: 굵게 120%/100% Arial, Helvetica, sans-serif 
경계: 단색 1px 
경계 하단: 없음 
커서: 포인터; 
} 
.accordion h3:hover { 
배경 색상: #e3e2e2; 
.accordion h3. 활성 { 
배경 위치: 오른쪽 5px;} 
.accordion p { 
배경: 
여백: 10px 15px 20px; 테두리 왼쪽: 단색 1px #c4c4c4; 
 테두리 오른쪽: 단색 1px #c4c4c4; 
} 

 

html
 


 

코드 복사

코드는 다음과 같습니다.

질문 1개 텍스트

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbimalesuada, ante at feugiattincidunt, commodo lacinia Massa diam vel eros. /h3>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae ligula.

여기에 또 다른 질문이 있습니다 Massa gravida metus, commodo lacinia Massa vel eros. Nunc fringilla neque vitae odio. ;p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, enim Massa gravida metus, commodo lacinia Massa. diam vel eros.