JavaScript-dä Wakaýýertleriň Ýokarlanmagynyň Ýapylmasynyň Ulanylyşy

Bir eýeniň içinde bir düwme we käbir blog bolsun:

<div id="parent">
	<button>click me</button>
	<div id="block">
		text
	</div>
</div>

Elementlerimize salgylary üýtgeýjilere alýarys:

let parent = document.querySelector('#parent');
let button = document.querySelector('button');
let block  = document.querySelector('#block');

Blogymyz başlangyçda gizlensin:

#block:not(.active) {
	display: none;
}

Şeýle edeliň, düwmä basylanda blog görünsin:

button.addEventListener('click', function() {
	block.classList.add('active');
});

Indi bolsa şeýle edeliň, eýäniň islendik ýerine basylanda blogymyz gizlensin:

parent.addEventListener('click', function() {
	block.classList.remove('active');
});

Emma, bizi gözletýän göz-göni gözlenilmedik syrpynç: sebäbi düwme eýeniň içinde ýerleşýär, şonuň üçin düwmä basmak, şol bir wagtyň özünde eýä hem basmakdyr. Bu ýagdaýda, ilki blogymyz görüner, soňra bolsa wakaýýertiň ýokarlanmagy sebäpli eýändaky işleýji işleýär we blogymyz gizlenýär.

Şu ýerde ýokarlanmany ýatyrmak mümkinçiligi bize peýdalı bolar: biz şeýle edip bileris, düwmä basylanda ýokarlanma ýatyrylsyn, eýe bu basyga jogap bermesin.

Görkezilen meseläniň dogry işleýşini öz başyňyza amala aşyryň.