Akordion dalam JavaScript

Sekarang mari kita laksanakan akordion. Ia serupa dengan tab yang diterbalikkan secara sisi. Pada masa yang sama, dalam akordion, tab semasa boleh ditutup jika anda mengklik pada pautan aktif.

Berikut adalah contoh:

Juga kaji susun atur yang akan kami gunakan untuk menyelesaikan masalah:

<div id="parent">
	<div class="tab active">
		<div class="link">
			<a href="#" >tab 1</a>
		</div>
		<div class="text">
			teks tab 1
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >tab 2</a>
		</div>
		<div class="text">
			teks tab 2
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >tab 3</a>
		</div>
		<div class="text">
			teks tab 3
		</div>
	</div>
</div>

#parent {
	margin: 0 auto;
	width: 400px;
}
.tab {
	margin-bottom: 10px;
}

.tab .link a {
	display: block;
	padding: 10px;
	color: black;
	text-decoration: none;
	text-align: center;
	background: #f8f8f8;
	border: 1px solid gray;
}
.tab .link:hover a {
	background: #f2f2f2;
}

.tab:not(.active) .text {
	display: none;
}
.tab .text {
	border: 1px dashed gray;
	border-top: none;
	
	padding: 10px;
	height: 300px;
}

Perbincangan

Dari segi teknikal, kod HTML akordion lebih mudah daripada kod tab: di dalamnya, pautan terletak secara langsung di atas spoiler yang dibuka dan ditutup olehnya. Selain itu, kelas active dalam susun atur kami diberikan kepada induk umum pautan dan spoiler.

Ini bermakna apabila pautan diklik hanya perlu menyahaktifkan tab lama dan mengaktifkan tab baru. Untuk menyahaktifkan tab lama, perlu mencari tab dengan kelas active dan mengeluarkan kelas tersebut daripadanya.

Untuk mengaktifkan tab baru, perlu berdasarkan klik pada pautan, cari induk tab bagi pautan tersebut dan berikan kepadanya kelas active. Dari segi teknikal, carian sedemikian boleh dilakukan seperti ini: cari sahaja induk terdekat pautan yang mempunyai kelas tab.

Salin kod HTML dan CSS yang diberikan kepada anda. Laksanakan akordion mengikut algoritma yang diterangkan.