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.

샘플 질문 제목>

Lorem ipsum dolor sit amet, Proin eget urna. neque vitae odio. Vivamus vitae ligula.
전체 데모 코드:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>jquery </title>

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.