Π Π°Π·Π½ΠΎΠ΅

Π‘ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ html: ΠœΠ΅Ρ‚ΠΎΠ΄Ρ‹ скрытия элСмСнтов Π²Π΅Π±-страниц / Π₯Π°Π±Ρ€

01.06.1988

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Как ΡΠΊΡ€Ρ‹Ρ‚ΡŒ-ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ элСмСнт ΠΏΠΎ Ρ‰Π΅Π»Ρ‡ΠΊΡƒ Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΌ элСмСнтС?

БущСствСнным для ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΉ ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ систСмы Β«ΡΠΊΡ€Ρ‹Ρ‚ΡŒ-ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΒ» элСмСнты являСтся расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ ΡƒΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠΌ элСмСнтом (Π½Π°Π·ΠΎΠ²Ρ‘ΠΌ Π΅Π³ΠΎ Кнопкой) ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹ΠΌ элСмСнтом (Π½Π°Π·ΠΎΠ²Ρ‘ΠΌ Π΅Π³ΠΎ ЦСлью). РасстояниС это ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ прСдставлСно Π² Ρ‚Ρ€Ρ‘Ρ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°Ρ…:

  1. элСмСнты находятся Π² ΠΏΠΎΠ΄Ρ‡ΠΈΠ½Π΅Π½ΠΈΠΈ (ЦСль Π²Π»ΠΎΠΆΠ΅Π½Π° Π² ΠšΠ½ΠΎΠΏΠΊΡƒ)
  2. элСмСнты находятся Π² ΠΏΠΎΠ΄Ρ‡ΠΈΠ½Π΅Π½ΠΈΠΈ ΠΎΠ±Ρ‰Π΅Π³ΠΎ родитСля
  3. элСмСнты НЕ ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΠ±Ρ‰Π΅Π³ΠΎ родитСля

ЕдинствСнно ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Π°Ρ, простая ΠΈ надёТная схСма скрытия-отобраТСния Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ класса Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта Π¦Π΅Π»ΠΈ. Если Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ структуру отобраТСния Π² этом ΠΊΠ»ΡŽΡ‡Π΅, окаТСтся Ρ‡Ρ‚ΠΎ сущСствСнно Ρ€Π°Π·Π½Ρ‹Ρ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° всСго Π΄Π²Π°: Π²Π°ΠΆΠ½ΠΎ лишь, ΠΈΠΌΠ΅Π΅Ρ‚ Π»ΠΈ Кнопка доступ ΠΊ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΌΡƒ элСмСнту Π¦Π΅Π»ΠΈ. Π’ ΠΏΠ΅Ρ€Π²ΠΎΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π΅ сама Кнопка являСтся этим Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»Π΅ΠΌ; Π²ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π΅ Ρƒ ΠΎΠ±ΠΎΠΈΡ… элСмСнтов ΠΎΠ±Ρ‰ΠΈΠΉ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒ; Π² ΠΎΠ±ΠΎΠΈΡ… случаях доступ ΠΊ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŽ Π΅ΡΡ‚ΡŒ – ΠΏΠΎ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ (Ρ‰Π΅Π»Ρ‡ΠΊΡƒ ΠΌΡ‹ΡˆΡŒΡŽ) ΠΌΡ‹ просто мСняСм класс Кнопки Π»ΠΈΠ±ΠΎ класс parentNode

Кнопки:

Π’ Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅ΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π΅ Кнопка располоТСна Ρ‡Ρ‘Ρ€Ρ‚ Π·Π½Π°Π΅Ρ‚ ΠΊΠ°ΠΊ Π΄Π°Π»Π΅ΠΊΠΎ ΠΎΡ‚ Π¦Π΅Π»ΠΈ, ΠΈ Ρƒ нас ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹:

Как Π½Π° javascript ΡƒΠ·Π½Π°Ρ‚ΡŒ, какая ΠΈΠ· Π¦Π΅Π»Π΅ΠΉ связана с Π΄Π°Π½Π½ΠΎΠΉ Кнопкой? Π‘Π°ΠΌΡ‹ΠΉ простой Π²Π°Ρ€ΠΈΠ°Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΡ‚ Π² Π³ΠΎΠ»ΠΎΠ²Ρƒ, – ΠΏΡ€ΠΈ Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΠΈ HTML страницы ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΡΠ²Π°ΠΈΠ²Π°Ρ‚ΡŒ Π² Π²ΠΈΠ΄Π΅ id ЦСлям ΠΈ Π² Π²ΠΈΠ΄Π΅ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ Β«Π»Π΅Π²ΠΎΠ³ΠΎΒ», Π½Π΅Π½ΡƒΠΆΠ½ΠΎΠ³ΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° – Кнопкам. Π’Π°ΠΊ всС ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈ Π΄Π΅Π»Π°ΡŽΡ‚. И Ρ‚Π°ΠΊ Π΄Π΅Π»Π°ΡŽΡ‚, Π΄Π°ΠΆΠ΅ ΠΊΠΎΠ³Π΄Π° ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹ вовсС Π½Π΅ Π½ΡƒΠΆΠ½Ρ‹.

ΠœΡ‹ ΠΆΠ΅ поступаСм ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½Ρ‹ΠΌ способом – всячСски ΠΈΠ·Π±Π΅Π³Π°Π΅ΠΌ «навязчивых» Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ², Π΄Π°ΠΆΠ΅ ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ, казалось Π±Ρ‹, Π½ΡƒΠΆΠ½Ρ‹. Π’ нашСм случаС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΡ‚ Π½Π΅ΠΈΠ·Π±Π΅ΠΆΠ½ΠΎ, ΠΊΠ°ΠΊ ΠΏΠ°Ρ€ΠΎΠ²ΠΎΠ· ΠΏΠΎ Ρ€Π΅Π»ΡŒΡΠ°ΠΌ: Ссли Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ нСльзя ΡΠΎΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ Π²

DOM СстСствСнным ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΏΡ€ΠΈ Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΠΈ Π½Π° сСрвСрС, Π·Π½Π°Ρ‡ΠΈΡ‚ этого вовсС Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ. Если нСльзя ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½Π° сСрвСрС Кнопки, соСдинённыС с цСлями, Π·Π½Π°Ρ‡ΠΈΡ‚ Кнопки вовсС Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° Π‘Π΅Ρ€Π²Π΅Ρ€Π΅ – ΠΈΡ… Π½ΡƒΠΆΠ½ΠΎ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² самом javascript.

ВсС ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹Π΅ ΠΈ скрываСмыС Π¦Π΅Π»ΠΈ находятся Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅ (Π½Π°Π·ΠΎΠ²Ρ‘ΠΌ Π΅Π³ΠΎ ΠšΠ°Ρ‚Π°Π»ΠΎΠ³). ПослС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страницы Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΈΡ‚ΡŒ элСмСнты ΠšΠ°Ρ‚Π°Π»ΠΎΠ³Π° ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹ΠΌ дСйствиям ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ с Π½ΠΈΠΌΠΈ ΠΏΠΎ Ρ‰Π΅Π»Ρ‡ΠΊΡƒ ΠΌΡ‹ΡˆΠΈ ΠΈΠ»ΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡ‹ΡˆΠΈ). Π’ΠΎΡ‚ Π²ΠΎ врСмя этой ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΊΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ элСмСнты ΠšΠ°Ρ‚Π°Π»ΠΎΠ³Π° Π² Ρ†ΠΈΠΊΠ»Π΅, ΠΌΡ‹ ΠΈ Π±ΡƒΠ΄Π΅ΠΌ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ элСмСнты, ΡƒΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ (наши Кнопки).

И Π² этот ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π½Π΅Ρ‚ Π½ΠΈΡ‡Π΅Π³ΠΎ Π»Π΅Π³Ρ‡Π΅, Ρ‡Π΅ΠΌ ΠΏΡ€ΠΈΡΠ²ΠΎΠΈΡ‚ΡŒ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ КнопкС javascript-свойство – ссылку Π½Π° элСмСнт-ЦСль:

while (i β€”) { el = list[i] if (hasClass(el.className, β€˜item’)) { currhead = h.appendChild(div.cloneNode(true)) //Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅ΠΌ ΠšΠ½ΠΎΠΏΠΊΡƒ currhead.Element = el //это наша ссылка Π½Π° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ Π¦Π΅Π»ΠΈ – элСмСнт ΠšΠ°Ρ‚Π°Π»ΠΎΠ³Π° currhead.onclick = showForeign /* … */ } }

Π›ΠΎΠ³ΠΈΠΊΠ° скрытия-отобраТСния Π½Π° CSS

ΠŸΡƒΡΡ‚ΡŒ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρƒ нас ΡƒΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠΉ элСмСнт Кнопка (ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΊΠ»ΠΈΠΊΠ°Π΅ΠΌ) ΠΈ скрытый элСмСнт ЦСль находятся Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΎΠ±Ρ‰Π΅ΠΌ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅ (элСмСнтС ΠšΠ°Ρ‚Π°Π»ΠΎΠ³Π°). Π’ΠΎΠ³Π΄Π° (ΠΏΠΎ Ρ‰Π΅Π»Ρ‡ΠΊΡƒ) Π½Π°Π΄ΠΎ ΠΌΠ΅Π½ΡΡ‚ΡŒ класс ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, Π° Π² CSS ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π΄Π΅Π»Π°Ρ‚ΡŒ этот ΠΈΠ·ΠΌΠ΅Π½Ρ‘Π½Π½Ρ‹ΠΉ класс. ΠŸΡƒΡΡ‚ΡŒ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ класс ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Π±ΡƒΠ΄Π΅Ρ‚ β€˜hidechild’, ΠΈ ΠΌΡ‹ запишСм Π² ΠΏΡ€Π°Π²ΠΈΠ»Π°Ρ… CSS, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π·Π°ΠΏΡ€Π΅Ρ‰Π°Ρ‚ΡŒ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ элСмСнтов с классом β€˜body’:

.hidechild .body {display:none;}

ΠŸΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ страницы всС элСмСнты с классом β€˜body’ Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Π²ΠΈΠ΄Π½Ρ‹ Π½Π° страницС. По Ρ‰Π΅Π»Ρ‡ΠΊΡƒ Π½Π° ΡƒΠΏΡ€Π°Π²Π»ΡΡŽΡ‰Π΅ΠΌ элСмСнтС β€˜head’ ΠΌΡ‹ просто Π±ΡƒΠ΄Π΅ΠΌ ΡƒΠ±ΠΈΡ€Π°Ρ‚ΡŒ (ΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ) этот класс β€˜hidechild’ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΌΡƒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρƒ. Π’ΠΎΡ‚ Π²ΠΊΡ€Π°Ρ‚Ρ†Π΅ ΠΈ вся Π»ΠΎΠ³ΠΈΠΊΠ°. Она Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ услоТнится, Ссли ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ Π΄Ρ€ΡƒΠ³ Π² Π΄Ρ€ΡƒΠ³Π° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹. Π’ΠΎ всСх случаях, для надёТности Π»ΡƒΡ‡ΡˆΠ΅ Π½Π΅ просто ΡƒΠ±ΠΈΡ€Π°Ρ‚ΡŒ Β«ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ ΠΏΠΎΡ‚ΠΎΠΌΠΊΠΎΠ²Β» класс, Π° Π΅Ρ‰Ρ‘ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Β«ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‰ΠΈΠΉΒ» класс – это упростит Π²Π·Π°ΠΈΠΌΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ нашСй систСмы отобраТСния с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌΠΈ CSS:

function showForeign() { var pare = this.Element; if (hasClass(pare.className, β€˜hidechild’)) pare.className = β€˜item showchild’; else pare.className = β€˜item hidechild’; }

Π’ случаС, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, влоТСнности элСмСнтов-ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ² Π΄Ρ€ΡƒΠ³ Π² Π΄Ρ€ΡƒΠ³Π°, Π»ΠΎΠ³ΠΈΠΊΡƒ отобраТСния Π½ΠΈΠΆΠ΅Π»Π΅ΠΆΠ°Ρ‰Π΅Π³ΠΎ элСмСнта ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ:

.hidechild .showchild .body {display:inherit;}

– Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ЦСль Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ скрыта, Π° Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° – ΠΏΠΎΠΊΠ°Π·Π°Π½Π°; ΠΈΡ… ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π²ΠΈΡΠ΅Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΡ‚ класса нСпосрСдствСнного родитСля (Π½ΠΎ Π½Π΅ ΠΎΡ‚ Π±ΠΎΠ»Π΅Π΅ Π΄Π°Π»Ρ‘ΠΊΠΈΡ… ΠΏΡ€Π΅Π΄ΠΊΠΎΠ²).

Π—Π°Ρ‰ΠΈΡ‚Π° ΠΎΡ‚ ΠΏΠ°Ρ€Π°Π½ΠΎΠΈΠΊΠΎΠ²

ΠŸΡ€Π°Π²ΠΈΠ»ΡŒΠ½Π΅Π΅ здСсь Π±Ρ‹Π»ΠΎ Π±Ρ‹ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, «удобства для ΠΏΠ°Ρ€Π°Π½ΠΎΠΈΠΊΠΎΠ²Β», ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ я ΠΈ сам ΠΏΠ°Ρ€Π°Π½ΠΎΠΈΠΊ – Ρ…ΠΎΠΆΡƒ ΠΏΠΎ Π½Π΅Π·Π½Π°ΠΊΠΎΠΌΡ‹ΠΌ сайтам ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ с Π²ΠΊΠ»ΡŽΡ‡Ρ‘Π½Π½Ρ‹ΠΌ NoScript, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ с ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹ΠΌ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ javascript. Π’ Ρ‚Π°ΠΊΠΎΠΉ ситуации, зайдя Π½Π° страницу нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°, я Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ смогу ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ содСрТимоС ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ² (β€˜body’), Π° Π±ΡƒΠ΄Ρƒ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ лишь ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Ρ‰Ρ‘Π»ΠΊΠ°Ρ‚ΡŒ с ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹ΠΌ javascript бСсполСзно.

Π­Ρ‚ΠΎ Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ. Π’Π΅Π΄ΡŒ скрываСм ΠΌΡ‹ Ρ‡Π°ΡΡ‚ΡŒ содСрТимого для удобства ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ – Ρ‡Ρ‚ΠΎΠ±Ρ‹ большоС количСство тСкста (ΠΈ рисунков) Π½Π΅ Π·Π°Π³Ρ€ΠΎΠΌΠΎΠΆΠ΄Π°Π»ΠΎ страницу, Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΈΠ·Π±Ρ€Π°Π½Π½ΠΎΠ΅, Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ. Если ΠΆΠ΅ содСрТимым Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ (ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ-ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΠΏΠΎ ТСланию ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ), Π»ΠΎΠ³ΠΈΡ‡Π½Π΅Π΅ всё-Ρ‚Π°ΠΊΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ всё, Π° Π½Π΅ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ всё. Π‘ΡƒΠ΄Π΅Ρ‚ ΠΌΠ΅Π½Π΅Π΅ ΡƒΠ΄ΠΎΠ±Π½ΠΎ, Ρ‡Π΅ΠΌ с ΡƒΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠΌΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ, Π½ΠΎ Π½Π΅ Ρ„Π°Ρ‚Π°Π»ΡŒΠ½ΠΎ (Π° Β«ΡΠΊΡ€Ρ‹Ρ‚ΡŒ всё» – Ρ„Π°Ρ‚Π°Π»ΡŒΠ½ΠΎ).

Для обСспСчСния Ρ‚Π°ΠΊΠΎΠΉ Π»ΠΎΠ³ΠΈΠΊΠΈ (Π±Π΅Π· javascript ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ всё) Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Ρ‰Ρ‘ ΠΎΠ΄ΠΈΠ½, Π²Ρ‹ΡˆΠ΅Π»Π΅ΠΆΠ°Ρ‰ΠΈΠΉ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€. Π‘ ΡƒΡ‡Ρ‘Ρ‚ΠΎΠΌ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ наши ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³ΠΈ – Π½Π΅ СдинствСнноС, Ρ‡Ρ‚ΠΎ Π½Π° нашСм сайтС Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ javascript, Ρ€Π°Π·ΡƒΠΌΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π² этом случаС Π² качСствС ΡƒΠΏΡ€Π°Π²Π»ΡΡŽΡ‰Π΅Π³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Π΅Ρ€Π° самый Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ элСмСнт –

body. Π›ΠΎΠ³ΠΈΠΊΠ° Π·Π°Ρ‰ΠΈΡ‚Ρ‹ проста:

  1. НазначаСм Π½Π° сСрвСрС элСмСнту body класс nojs.
  2. ΠŸΡ€ΠΈ Π½Π°Ρ‡Π°Π»Π΅ Ρ€Π°Π±ΠΎΡ‚Ρ‹ javascript (Ссли ΠΎΠ½ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π°Ρ‡Π½Ρ‘Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ), Π² ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·ΠΈΡ€ΡƒΡŽΡ‰ΠΈΡ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, мСняСм класс body Π½Π° js.
  3. Π’ Ρ‚Π΅ ΠΏΡ€Π°Π²ΠΈΠ»Π° CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π² дальнСйшСм прСдполагаСтся ΠΌΠ΅Π½ΡΡŽΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ javascript, добавляСм Π²ΠΏΠ΅Ρ€Ρ‘Π΄ лишний сСлСктор – .js:

.js .hidechild .body {display:none;} .js .showchild .hidechild .body {display:none;}

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ссли javascript ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Ρ‘Π½, Π½ΠΈΠΊΡ‚ΠΎ Π½Π΅ помСняСт класс body Π½Π° js, ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»Π° display:none; Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΡΡ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ (всС элСмСнты страницы Π±ΡƒΠ΄ΡƒΡ‚ сразу Π²ΠΈΠ΄Π½Ρ‹ ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅).

Π’ΠΎΡ‚ Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΈΠ»Π»ΡŽΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ скрытиС-ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ элСмСнтов, Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΡŽ ΠΊΠ½ΠΎΠΏΠΎΠΊ (Π²ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΌ случаС) ΠΈ удобства для ΠΏΠ°Ρ€Π°Π½ΠΎΠΈΠΊΠΎΠ²: hidechild.html

Π”ΠΈΠ»Π΅Ρ‚Π°Π½Ρ‚

ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ/ΡΠΊΡ€Ρ‹Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Ρ‡Π΅Ρ€Π΅Π· js β€’ фриланс-Ρ€Π°Π±ΠΎΡ‚Π° для спСциалиста β€’ катСгория Javascript ≑ Π—Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊ Π‘Π΅Ρ€Π³Π΅ΠΉ ΠŸΠ°Π»Π°ΠΌΠ°Ρ€Ρ‡ΡƒΠΊ

6 ΠΈΠ· 6

ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½

  1. публикация

  2. ΠΏΡ€ΠΈΠ΅ΠΌ ΡΡ‚Π°Π²ΠΎΠΊ

  3. ΡƒΡ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½ΠΈΠ΅ ΡƒΡΠ»ΠΎΠ²ΠΈΠΉ

  4. Ρ€Π΅Π·Π΅Ρ€Π²ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

  5. Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°

  6. ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½


На ΠΎΠ΄Π½ΠΎΠΉ страницС выводится, допустим, 10 Ρ‚ΠΎΠ²Π°Ρ€ΠΎΠ² с ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΌΠΈ характСристиками. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ‚ΠΎΠ²Π°Ρ€ ΠΈΠΌΠ΅Π΅Ρ‚ Π²ΠΈΠ΄ΠΈΠΌΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ β€” описаниС ΠΈ ΡΠΊΡ€Ρ‹Ρ‚ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ. Бписок Ρ‚ΠΎΠ²Π°Ρ€ΠΎΠ² ΠΈΠΌΠ΅Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ структуру:

<div>

   <div>Основная информация ΠΎ Ρ‚ΠΎΠ²Π°Ρ€Π΅</div>

   <button type=Β»buttonΒ» title=Β»ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅Β»>ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅</button>

   <div>Бкрытая информация ΠΎ Ρ‚ΠΎΠ²Π°Ρ€Π΅</div>

</div>

β€”β€”β€”β€”β€”β€”β€”β€”β€” Π•Ρ‰Π΅ Π±Π»ΠΎΠΊΠΈ Ρ‚ΠΎΠ²Π°Ρ€ΠΎΠ² β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”β€”-

<div>

   <div>Основная информация ΠΎ Ρ‚ΠΎΠ²Π°Ρ€Π΅</div>

   <button type=Β»buttonΒ» title=Β»ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅Β»>ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅</button>

   <div>Бкрытая информация ΠΎ Ρ‚ΠΎΠ²Π°Ρ€Π΅</div>

</div>

Π§Ρ‚ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ?

Под ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ Π±Π»ΠΎΠΊΠΎΠΌ Ρ‚ΠΎΠ²Π°Ρ€Π° Π΅ΡΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠ° Β«ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅Β». ΠŸΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° эту ΠΊΠ½ΠΎΠΏΠΊΡƒ, скрытая Ρ‡Π°ΡΡ‚ΡŒ описания ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ Ρ‚ΠΎΠ²Π°Ρ€Π° появляСтся (класс dopinfofalse мСняСтся Π½Π° dopinfoactive). Π’ΠΈΠ΄ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡ€ΠΈ этом Ρ‚ΠΎΠΆΠ΅ мСняСтся (Π½ΡƒΠΆΠ½ΠΎ ΠΌΠ΅Π½ΡΡ‚ΡŒ класс buttfalse Π½Π° buttactive). ПослС ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ наТатия Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Π²ΠΈΠ΄ Π±Π»ΠΎΠΊΠ° ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°ΡŽΡ‚ΡΡ Π² исходный Π²ΠΈΠ΄. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ‚Π°ΠΊΠΎΠΉ Π±Π»ΠΎΠΊ ΠΈ каТдая ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ‚ свой ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ id (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ dopinfo25, Π³Π΄Π΅ число 25 – ΠΊΠΎΠ΄ Ρ‚ΠΎΠ²Π°Ρ€Π°).

Если для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π·Π°Π΄Π°Ρ‡ΠΈ Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΅Ρ‰Π΅ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ html – Π½Π΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°. ΠœΠΎΠΆΠ΅Ρ‚ Π΅ΡΡ‚ΡŒ ΠΌΠ΅Π½Π΅Π΅ Π·Π°ΠΌΠΎΡ€ΠΎΡ‡Π΅Π½Π½Ρ‹ΠΉ способ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ Π·Π°Π΄Π°Ρ‡ΠΈ, Π³ΠΎΡ‚ΠΎΠ² Π²Ρ‹ΡΠ»ΡƒΡˆΠ°Ρ‚ΡŒ.

ΠžΡ‚Π·Ρ‹Π² Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊΠ° ΠΎ сотрудничСствС с Π”Π°Π½ΠΈΠΈΠ»ΠΎΠΌ Π¦ΠΈΠΎΠΌΠΎΠΉ

ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ/ΡΠΊΡ€Ρ‹Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Ρ‡Π΅Ρ€Π΅Π· js

ΠšΠ°Ρ‡Π΅ΡΡ‚Π²ΠΎ

ΠŸΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΠΈΠ·ΠΌ

Π‘Ρ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ

ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½ΠΎΡΡ‚ΡŒ

Π‘Ρ€ΠΎΠΊΠΈ


Π Π°Π±ΠΎΡ‚Π° Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Π° ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΈΠ²Π½ΠΎ.

ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ/ΡΠΊΡ€Ρ‹Ρ‚ΡŒ Π±Π»ΠΎΠΊ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Ρ‡Π΅Ρ€Π΅Π· js

ΠžΠΏΠ»Π°Ρ‚Π°

ΠŸΠΎΡΡ‚Π°Π½ΠΎΠ²ΠΊΠ° Π·Π°Π΄Π°Ρ‡ΠΈ

Π§Π΅Ρ‚ΠΊΠΎΡΡ‚ΡŒ Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ

ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½ΠΎΡΡ‚ΡŒ


  • Π‘Ρ‚Π°Π²ΠΊΠΈ 10
  • ΠžΠ±ΡΡƒΠΆΠ΄Π΅Π½ΠΈΠ΅ 3

Π΄Π°Ρ‚Π° ΠΎΠ½Π»Π°ΠΉΠ½ Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ ΡΡ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ врСмя выполнСния


  1. ПобСдившая ставка1 дСнь200β€―UAH

    ПобСдившая ставка1 дСнь200β€―UAH

    ЗдравствуйтС, Π³ΠΎΡ‚ΠΎΠ² Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π±Π»ΠΎΠΊ прямо сСйчас.
    Π–Π΄Ρƒ вашСго ΠΎΡ‚Π²Π΅Ρ‚Π°.

  2. 1 дСнь200β€―UAH

    1 дСнь200β€―UAH

    ЗдравствуйтС.

    Π“ΠΎΡ‚ΠΎΠ² ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π’Π°Ρˆ Π·Π°ΠΊΠ°Π·. ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ Π² лс.
    Π‘ΡƒΠ΄Ρƒ Ρ€Π°Π΄ сотрудничСству.

    ΠžΠ±Ρ€Π°Ρ‰Π°ΠΉΡ‚Π΅ΡΡŒ.

  3.  Ρ„рилансСр большС Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π° сСрвисС

  4. 1 дСнь200β€―UAH

    1 дСнь200β€―UAH

    ЗдравствуйтС, Π±Π΅Π· ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ Π³ΠΎΡ‚ΠΎΠ² Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠΎΠ΄ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ/ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ элСмСнт ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ.

  5.  Ρ„рилансСр большС Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π° сСрвисС

  6. 3185β€³ data-days=Β»1β€³ data-lastactivity=Β»1639655161β€³>

     Ρ„рилансСр большС Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π° сСрвисС

  7. 1 дСнь150β€―UAH

    1 дСнь150β€―UAH

    Π”ΠΎΠ±Ρ€Ρ‹ΠΉ Π²Π΅Ρ‡Π΅Ρ€, Π‘Π΅Ρ€Π³Π΅ΠΉ. Π“ΠΎΡ‚ΠΎΠ² Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ скрипт, Ρƒ мСня большой ΠΎΠΏΡ‹Ρ‚ с JS. ΠŸΠΈΡˆΠΈΡ‚Π΅, обсудим Π΄Π΅Ρ‚Π°Π»ΠΈ.

  8. ставка скрыта фрилансСром

  9. ставка скрыта фрилансСром

  10.  Ρ„рилансСр большС Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π° сСрвисС


2 Π³ΠΎΠ΄Π° Π½Π°Π·Π°Π΄

156 просмотров

ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ элСмСнтов.

Π£Ρ‚ΠΈΠ»ΠΈΡ‚Ρ‹ Β· Bootstrap. ВСрсия v4.0.0
  • Как это устроСно
  • ΠžΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅
  • ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹
  • Π‘ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ элСмСнтов
  • ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈ ΠΏΠ΅Ρ‡Π°Ρ‚ΠΈ

БыстроС ΠΈ ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹Ρ… элСмСнтов ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ³ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½Π°ΡˆΠΈΡ… слуТСбных ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ отобраТСния. Π’ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π±ΠΎΠ»Π΅Π΅ ΠΎΠ±Ρ‰ΠΈΡ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ для управлСния ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΡ€ΠΈ ΠΏΠ΅Ρ‡Π°Ρ‚ΠΈ.

Как это устроСно

Π˜Π·ΠΌΠ΅Π½ΡΠΉΡ‚Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства display с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½Π°ΡˆΠΈΡ… ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹Ρ… классов отобраТСния. ΠœΡ‹ Π½Π°ΠΌΠ΅Ρ€Π΅Π½Π½ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎΠ΄Π½Π°Π±ΠΎΡ€ всСх Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ свойства display. ΠšΠ»Π°ΡΡΡ‹ ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ для создания Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… эффСктов, ΠΊΠ°ΠΊ Π²Π°ΠΌ Π½Π°Π΄ΠΎ.

ΠžΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅

ΠšΠ»Π°ΡΡΡ‹ отобраТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ подходят всСм Π±Ρ€Π΅ΠΉΠΊΠΏΠΎΠΉΠ½Ρ‚Π°ΠΌ, ΠΎΡ‚ xs Π΄ΠΎ xl, Π½Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ Π² своСм Π½Π°Π·Π²Π°Π½ΠΈΠΈ Π°Π±Π±Ρ€Π΅Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ Π±Ρ€Π΅ΠΉΠΊΠΏΠΎΠΉΠ½Ρ‚Π°, Ρ‚. ΠΊ. эти классы ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ, начиная ΠΎΡ‚ min-width: 0; ΠΈ Π²Ρ‹ΡˆΠ΅, ΠΈ Ρ‚.ΠΎ., Π½Π΅ «связаны» ΠΌΠ΅Π΄ΠΈΠ°-запросами. ΠžΡΡ‚Π°Π²ΡˆΠΈΠ΅ΡΡ Π±Ρ€Π΅ΠΉΠΊΠΏΠΎΠΉΠ½Ρ‚Ρ‹, ΠΎΠ΄Π½Π°ΠΊΠΎ, Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ Π°Π±Π±Ρ€Π΅Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ Π±Ρ€Π΅ΠΉΠΊΠΏΠΎΠΉΠ½Ρ‚Π°.

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ классы Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΏΠΎ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρƒ:

  • .d-{value} для xs
  • .d-{breakpoint}-{value} для sm, md, lg ΠΈ xl.

Π“Π΄Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ – это ΠΎΠ΄Π½ΠΎ ΠΈΠ·:

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

МСдиа-запросы Π²Π»ΠΈΡΡŽΡ‚ Π½Π° ΡˆΠΈΡ€ΠΈΠ½Ρƒ экрана, начиная с ΡƒΠΊΠ°Π·Π°Π½Π½Π½ΠΎΠ³ΠΎ Π±Ρ€Π΅ΠΉΠΊΠΏΠΎΠ½Ρ‚Π° ΠΈΠ»ΠΈ большС. НапримСр, .d-lg-none Π·Π°Π΄Π°Π΅Ρ‚ display: none; Π½Π° ΠΎΠ±ΠΎΠΈΡ… lg ΠΈ xl.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹

d-inline

d-inline

<div>d-inline</div>
<div>d-inline</div>

d-block d-block

<span>d-block</span>
<span>d-block</span>

Π‘ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ элСмСнтов

Для быстрой ΠΌΠΎΠ±ΠΈΠ»-Ρ„Ρ€Π΅Π½Π΄Π»ΠΈ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹Π΅ классы для ΠΏΠΎΠΊΠ°Π·Π° ΠΈ скрытия элСмСнтов Π½Π° устройствС. Π˜Π·Π±Π΅Π³Π°ΠΉΡ‚Π΅ создания ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Ρ€Π°Π·Π½Ρ‹Ρ… вСрсий сайта, вмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ просто Β«ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΒ» ΠΏΡ€ΡΡ‚Π°Ρ‚ΡŒ элСмСнт для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° экрана.

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ элСмСнты, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ класс .d-none ΠΈΠ»ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· классов .d-{sm,md,lg,xl}-none.

Для ΠΏΠΎΠΊΠ°Π·Π° элСмСнта Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ ΠΈΠ½Π²Π΅Ρ€Π²Π°Π»Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² экрана Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΡ‡Π΅Ρ‚Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ класс .d-*-none с классом .d-*-*, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ .d-none .d-md-block .d-xl-none скроСт элСмСнт Π½Π° всСх Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ… экрана, ΠΊΡ€ΠΎΠΌΠ΅ срСдних ΠΈ Π±ΠΎΠ»ΡŒΡˆΠΈΡ….

Π Π°Π·ΠΌΠ΅Ρ€ экрана Класс
Π‘ΠΊΡ€Ρ‹Ρ‚ Π½Π° всСх .d-none
Π‘ΠΊΡ€Ρ‹Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° xs .d-none .d-sm-block
Π‘ΠΊΡ€Ρ‹Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° sm .d-sm-none .d-md-block
Π‘ΠΊΡ€Ρ‹Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° md .d-md-none .d-lg-block
Π‘ΠΊΡ€Ρ‹Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° lg .d-lg-none .d-xl-block
Π‘ΠΊΡ€Ρ‹Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° xl .d-xl-none
Π’ΠΈΠ΄Π΅Π½ Π½Π° всСх .d-block
Π’ΠΈΠ΄Π΅Π½ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° xs .d-block .d-sm-none
Π’ΠΈΠ΄Π΅Π½ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° sm .d-none .d-sm-block .d-md-none
Π’ΠΈΠ΄Π΅Π½ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° md . d-none .d-md-block .d-lg-none
Π’ΠΈΠ΄Π΅Π½ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° lg .d-none .d-lg-block .d-xl-none
Π’ΠΈΠ΄Π΅Π½ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° xl .d-none .d-xl-block

Π‘ΠΊΡ€Ρ‹Ρ‚ΠΎ Π½Π° экранах ΡˆΠΈΡ€Π΅ lg

Π‘ΠΊΡ€Ρ‹Ρ‚ΠΎ Π½Π° экранах мСньшС lg

<div>Π‘ΠΊΡ€Ρ‹Ρ‚ΠΎ Π½Π° экранах ΡˆΠΈΡ€Π΅ lg</div>
<div>Π‘ΠΊΡ€Ρ‹Ρ‚ΠΎ Π½Π° экранах мСньшС lg</div>

ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈ ΠΏΠ΅Ρ‡Π°Ρ‚ΠΈ

Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ display элСмСнтов ΠΏΡ€ΠΈ ΠΏΠ΅Ρ‡Π°Ρ‚ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½Π°ΡˆΠΈΡ… классов. Бюда Π²Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Ρ‚Π°ΠΊΠΈΡ… ΠΆΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ display, ΠΊΠ°ΠΊ Π² Π½Π°ΡˆΠΈΡ… ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹Ρ… классах .d-*.

  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-table
  • .d-print-table-row
  • . d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

ΠšΠ»Π°ΡΡΡ‹ ΠΏΠ΅Ρ‡Π°Ρ‚ΠΈ ΠΈ отобраТСния ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΡ‡Π΅Ρ‚Π°Ρ‚ΡŒ.

Волько экран (Π‘ΠΊΡ€Ρ‹Ρ‚ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΏΠ΅Ρ‡Π°Ρ‚ΠΈ)

Волько ΠΏΠ΅Ρ‡Π°Ρ‚ΡŒ (Π‘ΠΊΡ€Ρ‹Ρ‚ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° экранС)

Π‘ΠΊΡ€Ρ‹Ρ‚ΡŒ Π΄ΠΎ Π±ΠΎΠ»ΡŒΡˆΠΈΡ… экранов, Π½ΠΎ всСгда отобраТаСтся для ΠΏΠ΅Ρ‡Π°Ρ‚ΠΈ

<div>Волько экран (Π‘ΠΊΡ€Ρ‹Ρ‚ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΏΠ΅Ρ‡Π°Ρ‚ΠΈ)</div>
<div>Волько ΠΏΠ΅Ρ‡Π°Ρ‚ΡŒ (Π‘ΠΊΡ€Ρ‹Ρ‚ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° экранС)</div>
<div>Π‘ΠΊΡ€Ρ‹Ρ‚ΡŒ Π΄ΠΎ Π±ΠΎΠ»ΡŒΡˆΠΈΡ… экранов, Π½ΠΎ всСгда отобраТаСтся для ΠΏΠ΅Ρ‡Π°Ρ‚ΠΈ</div>

Please enable JavaScript to view the comments powered by Disqus.

ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ скрытиС содСрТимого β€” ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹

Кнопка, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰Π°Ρ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ содСрТимоС, называСтся раскрытиСм. БущСствуСт нСсколько способов ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ доступными.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ раскрытиС ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ?

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ считаСтся раскрытиСм, Ссли для отобраТСния ΠΈ скрытия сСгмСнта содСрТимого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΎΠ΄Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ°. Он отличаСтся ΠΎΡ‚ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ ΠΎΠ²Π΅Ρ€Π»Π΅ΠΉ, содСрТащий ΡΠΎΠ±ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ закрытия.

НСкоторыС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹:

  • Часто Π·Π°Π΄Π°Π²Π°Π΅ΠΌΡ‹Π΅ вопросы, Π³Π΄Π΅ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ вопрос прСдставляСт собой ΠΊΠ½ΠΎΠΏΠΊΡƒ, которая ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΈΠ»ΠΈ скрываСт ΠΎΡ‚Π²Π΅Ρ‚.

  • Π“Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€-мСню Π² мобильном ΠΎΠΊΠ½Π΅ просмотра, часто Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΡƒΠ΅ΠΌΠΎΠ΅ трСмя Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ полосами:

  • Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню:

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ доступноС раскрытиС ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ

  • ΠŸΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΡ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ сразу послС ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² исходном ΠΊΠΎΠ΄Π΅
  • Π‘ΠΊΡ€Ρ‹Ρ‚ΡŒ содСрТимоС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ display:none
  • Π˜Π½Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ ΠΎ статусС ΠΊΠ½ΠΎΠΏΠΊΠΈ развСртывания/свСртывания

Π—Π°ΠΊΠ°Π· исходного ΠΊΠΎΠ΄Π°

Когда Π΄Π΅Π»ΠΎ Π΄ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π΄ΠΎ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, содСрТимоС ΠΊΠ½ΠΎΠΏΠΊΠΈ раскрытия ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ размСщаСтся ΠΏΠΎΠ΄ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΈΠ»ΠΈ рядом с Π½Π΅ΠΉ. Π§Ρ‚ΠΎ касаСтся исходного ΠΊΠΎΠ΄Π°, Ρ‚ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΈΠ½ΠΎΠ³Π΄Π° Π½Π΅ΠΏΡ€Π°Π²ΠΎΠΌΠ΅Ρ€Π½ΠΎ размСщаСтся ΠΏΠ΅Ρ€Π΅Π΄ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΈΠ»ΠΈ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π½ΠΈΠΆΠ΅. Π­Ρ‚ΠΎ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ видят свой экран.

ΠŸΠΎΡ€ΡΠ΄ΠΎΠΊ исходного ΠΊΠΎΠ΄Π° Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ ΠΏΡ€ΠΈ создании ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° раскрытия: Π½Π°Ρ‡Π½ΠΈΡ‚Π΅ с ΠΊΠ½ΠΎΠΏΠΊΠΈ, которая ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚/скрываСт содСрТимоС, Π·Π°Ρ‚Π΅ΠΌ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ сворачиваСмоС содСрТимоС.

Π‘ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ display:none

Когда Ρ‡Π°ΡΡ‚ΡŒ содСрТимого Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ скрыта, ΠΎΠ½Π° Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ скрыта ΠΎΡ‚ всСх. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ display: none , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ содСрТимоС. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌ ΠΊΠ°ΠΊ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ чтСния с экрана, Ρ‚Π°ΠΊ ΠΈ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ скрытый ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ табуляции.

ДоступныС ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹ состояния

Π’ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ стрСлки, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для обозначСния ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΊΠ°ΠΊ Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΠΎΠΉ/сворачиваСмой. Π­Ρ‚ΠΎΡ‚ ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ состояния ΠΏΠΎΠ΄Ρ€Π°Π·ΡƒΠΌΠ΅Π²Π°Π΅Ρ‚ дСйствиС. Π’ΠΎΡ‚, Ρƒ ΠΊΠΎΠ³ΠΎ Π½Π΅Ρ‚ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΎΠ±Π·ΠΎΡ€Π° своСго экрана, Π½Π΅ Π·Π½Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ эта ΠΊΠ½ΠΎΠΏΠΊΠ° Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°ΡΡˆΠΈΡ€ΡΡ‚ΡŒΡΡ/ΡΠ²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΈ использовании. Π’Π΅ΠΊΡƒΡ‰Π΅Π΅ состояниС Π±Π»ΠΎΠΊΠ° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° (Π²ΠΈΠ΄ΠΈΠΌΠΎΠ΅ ΠΈΠ»ΠΈ скрытоС) Ρ‚Π°ΠΊΠΆΠ΅ нСясно. Π•ΡΡ‚ΡŒ нСсколько способов Ρ€Π΅ΡˆΠΈΡ‚ΡŒ эту ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ.

Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΌΠ΅Ρ‚ΠΊΡƒ ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΌΠ΅Ρ‚ΠΊΡƒ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊΠΎΠ΅ дСйствиС ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ. НапримСр, Π·Π½Π°Ρ‡ΠΎΠΊ Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Π°, Π²Π΅Π΄ΡƒΡ‰ΠΈΠΉ ΠΊ сворачиваСмому мСню, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΌΠ΅Ρ‚ΠΊΡƒ, ΡΠΎΠΎΠ±Ρ‰Π°ΡŽΡ‰ΡƒΡŽ, Ρ‡Ρ‚ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ° Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ мСню ΠΏΡ€ΠΈ Π°ΠΊΡ‚ΠΈΠ²Π°Ρ†ΠΈΠΈ:

 
ΠœΡƒΠ»ΡŒΡ‚ΡΡˆΠ½ΠΎΠ΅ мСню



 

Когда мСню отобраТаСтся, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ ΠΌΠ΅Ρ‚ΠΊΡƒ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° Β«ΡΠΊΡ€Ρ‹Ρ‚ΡŒ мСню».

НС всСгда Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ΄ΠΎΠ±Ρ€Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒΠ»ΠΈΡ€ΠΎΠ²ΠΊΡƒ, особСнно Ссли Ρ€Π΅Ρ‡ΡŒ ΠΈΠ΄Π΅Ρ‚ ΠΎ многоязычных Π²Π΅Π±-сайтах.

Π‘ подробностями
ΠΈ сводкой Как это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚?

Π­Ρ‚ΠΎ довольно просто.

 <подробности>
Как это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚?

Π­Ρ‚ΠΎ довольно просто.

На основС этого HTML-ΠΊΠΎΠ΄Π° Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Π·Π°ΠΏΠΎΠ»Π½ΡΡŽΡ‚ Π΄Π΅Ρ€Π΅Π²ΠΎ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… возмоТностСй, поэтому ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ чтСния с экрана ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΠ±ΡŠΡΠ²ΠΈΡ‚ΡŒ Ρ‚Π΅ΠΊΡƒΡ‰ΡƒΡŽ Ρ€ΠΎΠ»ΡŒ ΠΈ состояниС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°.

Π‘
aria-expanded

ARIA Ρ‚Π°ΠΊΠΆΠ΅ являСтся ΠΎΠΏΡ†ΠΈΠ΅ΠΉ. ВзглянитС Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Β«ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ-ΡΠΊΡ€Ρ‹Ρ‚ΡŒΒ», Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ это дСлаСтся.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

 
 
  • Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΈΠΊΠΈ с использованиСм Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ ΠΈ сводок , Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ свой собствСнный сцСнарий для отобраТСния/скрытия содСрТимого.
  • Атрибут aria-expanded ΠΏΠ΅Ρ€Π΅Π΄Π°Π΅Ρ‚ состояниС Π±Π»ΠΎΠΊΠ° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π² Π΄Π΅Ρ€Π΅Π²ΠΎ доступности. Aria-expanded=Β»trueΒ» ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π²ΠΈΠ΄Π΅Π½. Aria-expanded=Β»falseΒ» ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ содСрТимоС Π² настоящСС врСмя скрыто. ВсСгда синхронизируйтС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ этого Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° с Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌ состояниСм ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° . ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ чтСния с экрана ΠΎΠ±ΡŠΡΠ²ΡΡ‚ ΠΎΠ± этом состоянии, ΠΊΠΎΠ³Π΄Π° ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ фокус.
  • Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ aria-expanded Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅, которая ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ вмСсто ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° скрытого/ΠΏΠΎΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ содСрТимого .
  • Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ aria-expanded ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ страницы . НС добавляйтС Π΅Π³ΠΎ просто ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ состояния ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°.
  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π½Π΅ΠΉΡ‚Ρ€Π°Π»ΡŒΠ½ΡƒΡŽ ΠΌΠ΅Ρ‚ΠΊΡƒ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡ€ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ этого ΠΌΠ΅Ρ‚ΠΎΠ΄Π°, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, «мСню» вмСсто Β«ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ мСню» ΠΈΠ»ΠΈ Β«ΡΠΊΡ€Ρ‹Ρ‚ΡŒ мСню». ΠœΠ΅Ρ‚ΠΊΠ° остаСтся Π½Π΅ΠΉΡ‚Ρ€Π°Π»ΡŒΠ½ΠΎΠΉ, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ aria-expanded ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π½Π° состояниС.
  • ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠΎΠ΄Π° Ρ‚Π°ΠΊΠΆΠ΅ содСрТит Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ aria-controls . Π­Ρ‚ΠΎΡ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ сообщаСт Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ тСхнологиям, ΠΊΠ°ΠΊΠΈΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ управляСт ΠΊΠ½ΠΎΠΏΠΊΠ°. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ aria-controls ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ располагаСтся сразу послС ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² исходном ΠΊΠΎΠ΄Π΅ раскрытия ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, этот Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ являСтся Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ.

Π‘Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ Β· ΠΠ°Ρ‡Π°Π»ΡŒΠ½Π°Ρ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ°

ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π² вашСм ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… классов ΠΈ Π½Π°ΡˆΠΈΡ… ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹Ρ… ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ JavaScript.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

НаТмитС ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΠΈΠΆΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠΉ элСмСнт с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ измСнСния класса:

  • . collapse скрываСт содСрТимоС
  • .collapsing примСняСтся Π²ΠΎ врСмя ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ²
  • .collapse.show ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ содСрТимоС

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ссылку с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ href ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ° с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ data-target . Π’ ΠΎΠ±ΠΎΠΈΡ… случаях трСбуСтся data-toggle="collapse" .

Бсылка с href

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry Richardson ad Squid. Nihil anim keffiyeh Helvetica, рСмСслСнноС ΠΏΠΈΠ²ΠΎ Labore Wes Anderson cred nesciunt sapiente ea proident.

 

НСсколько Ρ†Π΅Π»Π΅ΠΉ

<Π΄Π΅Π»> <Π΄Π΅Π»> <Π΄Π΅Π»> <Π΄Π΅Π»> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry Richardson ad Squid. Nihil anim keffiyeh Helvetica, рСмСслСнноС ΠΏΠΈΠ²ΠΎ Labore Wes Anderson cred nesciunt sapiente ea proident.