Melaksanakan fungsi 'menunjukkan lebih/kurang' dengan CSS tulen

Pembangunan web moden sering memanfaatkan CSS untuk mewujudkan unsur -unsur dinamik seperti slider, modal, dan tooltips, meminimumkan pergantungan JavaScript. Artikel ini menunjukkan pendekatan CSS tulen untuk melaksanakan fungsi "menunjukkan lebih/kurang", bahkan mewujudkan contoh gaya akordion yang berfungsi. Kami akan meneroka teknik, isu yang berpotensi, dan penyelesaian. Pertimbangan kebolehcapaian ditinggalkan di sini tetapi merupakan aspek penting untuk peningkatan masa depan.

Konsep Utama:

CSS-Only "Tunjukkan lebih/kurang" ini bergantung pada "hack kotak semak" dan pemilih saudara. Struktur HTML menggunakan senarai yang tidak teratur; Item terakhir mengandungi kotak semak tersembunyi dan labelnya. Senarai yang tidak teratur bersarang memegang kandungan yang akan ditunjukkan/tersembunyi. Ciri -ciri CSS

dan max-height mengawal lancar/menyembunyikan. Ketidakkonsistenan penyemak imbas mungkin wujud; Sebagai contoh, tingkah laku kursor mungkin berbeza di seluruh pelayar. transition

Pengetahuan CSS Essential:

memahami perkara berikut adalah penting:

• Pemilih Sibling Umum () : Memilih semua adik beradik mengikuti elemen yang ditentukan. ~
pemilih saudara bersebelahan (
• ) : Memilih adik beradik.
hack kotak semak
• : Menggunakan keadaan diperiksa kotak semak untuk mencetuskan perubahan CSS.
Demo Codepen (pautan ditinggalkan kerana ia tidak disediakan dalam input) menyediakan contoh interaktif teknik -teknik ini.

Struktur HTML:

Struktur HTML asas adalah (dipermudahkan dari asal):

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li class="container">
    <input type="checkbox" id="showHide">
    <label for="showHide"></label>
    <ul>
      <li>Hidden Item 1</li>
      <li>Hidden Item 2</li>
    </ul>
  </li>
</ul>

menggayakan bekas kotak semak:

gaya

meletakkan label dan menyembunyikan kotak semak:

.container

kandungan label ("lebih" atau "kurang") dan animasi dikendalikan menggunakan pseudo-elements (

.container {
  position: relative;
  height: auto;
}

[type="checkbox"] {
  position: absolute;
  left: -9999px;
}

label {
  background: #e4e3df;
  display: block;
  width: 100%;
  height: 50px;
  cursor: pointer;
  position: absolute;
  top: 0;
}

dan

): ::before ::after

pada mulanya menyembunyikan bersarang <pre class='brush:php;toolbar:false;'>label:before, label:after { position: absolute; } /* ... (styles for :before and :after based on checked state) ... */</pre> :

<ul></ul>

[type="checkbox"] ~ ul {
  display: none;
}

meniru

dengan css: onclick keadaan diperiksa kotak semak mendedahkan kandungan tersembunyi:

kedudukan dan kandungan label diselaraskan apabila diperiksa:

[type="checkbox"]:checked ~ ul {
  display: block;
}

demo codepen (pautan ditinggalkan) mempamerkan kesan togol asas ini.

[type="checkbox"]:checked + label {
  top: 100%;
}

/* ... (styles for :before and :after when checked) ... */

Menambah peralihan yang lancar:

untuk peralihan yang lebih lancar, gunakan

dan

: max-height transition

Peralihan label juga dikemas kini:

[type="checkbox"] ~ ul {
  overflow: hidden;
  max-height: 0;
  transition: max-height .45s cubic-bezier(.44,.99,.48,1);
}

[type="checkbox"]:checked ~ ul {
  max-height: 300px; /* Or a calculated height */
}

demo codepen (pautan ditinggalkan) menunjukkan peralihan yang lebih baik dan halus.

label {
  transition: top .45s cubic-bezier(.44,.99,.48,1);
}

Pertimbangan penyemak imbas:

Perhatikan bahawa tingkah laku kursor mungkin tidak konsisten di seluruh pelayar (terutamanya dengan peralihan).

Kesimpulan:

Artikel ini menunjukkan pendekatan CSS yang kuat untuk "menunjukkan lebih/kurang" fungsi. Walaupun terdapat batasan (terutamanya tidak konsisten penyemak imbas dan keperluan untuk max-height yang telah ditetapkan), teknik ini menawarkan penyelesaian yang bersih dan bebas JavaScript untuk banyak senario. Ingatlah untuk sentiasa mengutamakan kebolehcapaian semasa membina komponen interaktif.

Atas ialah kandungan terperinci Melaksanakan fungsi 'menunjukkan lebih/kurang' dengan CSS tulen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!