jQuery로 간단한 아코디언 효과를 구현하는 방법은 무엇입니까? (코드 예)

jQuery로 간단한 아코디언 효과를 얻는 방법은 무엇인가요? 이 기사에서는 jQuery를 사용하여 간단한 아코디언 효과를 얻는 방법을 소개합니다(코드 포함). 필요한 친구가 참고할 수 있기를 바랍니다. [추천 튜토리얼: JavaScript 동영상 튜토리얼]

기본 아이디어: 　

아코디언의 효과는 주로 on html 문서의 구조, 구조에 따라 사용되는 jq 메소드가 다를 수 있습니다.

<div>
　　
　　<div>标题　　

　　　　<div>内容</div>
 　 </div>
　　<div>标题　　

　　　　<div>内容</div>
 　 </div>
　　<div>标题　　

　　　　<div>内容</div>
 　 </div>
　　
　　<div>标题　　

　　　　<div>内容</div>
 　 </div>
</div>

제 기본 아이디어는 제목 표시줄을 클릭하여 하위 요소에 아래쪽 표시 애니메이션을 적용한 다음 하위를 통해 부모 자체를 찾은 다음 이를 부모와 일치시키는 것입니다. 형제의 자녀 숨기도록 하세요.

효과는 아래와 같습니다. (스타일이 좀 못생겼으니 한번 보세요)

# 🎜🎜##🎜🎜 #첨부 코드: (html에 jquery 파일을 도입하는 것을 잊지 마세요)

---

html 부분:

<div>
	<div>box1

		<div>1111</div>
		<div>1111</div>
		<div>1111</div>
		<div>1111</div>

	</div>

	<div>box2
		<div>5555</div>
		<div>5555</div>
		<div>5555</div>
		<div>5555</div>
	</div>

	<div>box3
		<div>33333</div>
		<div>33333</div>
		<div>33333</div>
		<div>33333</div>
	</div>
	<div>box4
		<div>2222</div>
		<div>2222</div>
		<div>2222</div>
		<div>2222</div>
	</div>
</div>

css 부분:

div {
	border: 1px solid #000;
	width: 200px;
}

.navv {
	background-color: ghostwhite;
}

.navv div {
	background-color: aquamarine;
	border-left: none;
	border-right: none;
	display: none;
}

#box {
	margin: 0 auto;
}

#box1_c,#box2_c,#box3_c,#box4_c {
	border: none;
}

#🎜🎜 #js 부분:

$().ready(function(){
    $(".navv").click(function(){
      $(this).children().slideDown(200).parent().siblings().children().slideUp(200);
    })
 })

동적 렌더링:

위 내용은 jQuery로 간단한 아코디언 효과를 구현하는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!