Akordeonas JavaScript

Dabar įgyvendinkime akordeoną. Jis panašus į į šoną apverstas korteles. Be to, akordeone galite uždaryti dabartinę kortelę, jei paspausite ant aktyvios nuorodos.

Štai pavyzdys:

Taip pat išstudijuokite išdėstymą, kuriuo mes spręsime užduotį:

<div id="parent">
	<div class="tab active">
		<div class="link">
			<a href="#" >kortelė 1</a>
		</div>
		<div class="text">
			kortelės 1 tekstas
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >kortelė 2</a>
		</div>
		<div class="text">
			kortelės 2 tekstas
		</div>
	</div>
	<div class="tab">
		<div class="link">
			<a href="#" >kortelė 3</a>
		</div>
		<div class="text">
			kortelės 3 tekstas
		</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;
}

Aptarimas

Techniškai akordeono HTML kodas yra patogesnis nei kortelių kodas: jame nuorodos yra tiesiogiai virš atitinkamo išskleidžiamojo bloko, kurį jos atveria ir uždaro. Be to, klasė active mūsų išdėstyme suteikiama bendram nuorodos ir išskleidžiamojo bloko tėviniam elementui.

Tai reiškia, kad paspaudus nuorodą tiesiog reikia deaktyvuoti seną kortelę ir aktyvuoti naują. Norint deaktyvuoti seną kortelę, reikia rasti kortelę su klase active ir pašalinti iš jos šią klasę.

Norint aktyvuoti naują kortelę, reikia pagal paspaudimą ant nuoroda rasti šios nuorodos tėvinę kortelę ir suteikti jai klasę active. Techniškai tokią paiešką galima atlikti taip: tiesiog rasti artimiausią nuorodos tėvą, turintį klasę tab.

Nukopijuokite pateiktas HTML ir CSS kodus. Įgyvendinkite akordeoną pagal aprašytą algoritmą.