Bagaimana untuk melaksanakan paparan klik untuk menyembunyikan dalam css

CSS Click to Hide Show

Dalam era Internet hari ini, tumpuan reka bentuk web telah beralih daripada paparan statik mudah kepada pengalaman interaktif yang lebih maju. Antaranya, menyembunyikan dan menunjukkan adalah salah satu kaedah interaksi yang paling biasa digunakan Kaedah ini membolehkan pengguna mendapatkan maklumat yang diperlukan dengan lebih mudah dan boleh mengurangkan kandungan berlebihan pada halaman. Dalam CSS, terdapat beberapa kaedah untuk menyembunyikan dan menunjukkan, dan artikel ini akan memperkenalkannya satu demi satu.

1. Gunakan atribut paparan

Nilai atribut paparan dalam CSS mengawal sama ada elemen ditunjukkan atau disembunyikan. Nilai termasuk:

• tiada: Elemen akan dialih keluar sepenuhnya daripada halaman dan tidak akan kelihatan sepenuhnya kepada reka letak.
• blok: Elemen dipaparkan sebagai elemen peringkat blok, bermakna ia menduduki keseluruhan baris.
• sebaris: Elemen dipaparkan sebagai elemen sebaris, bermakna ia mengambil ruang yang sama dengan teks.
• blok sebaris: Elemen dipaparkan sebagai elemen sebaris, tetapi atribut seperti lebar dan tinggi boleh ditetapkan.

Menggunakan atribut paparan, kita boleh menyembunyikan dan menunjukkan dengan menambah atau mengalih keluar atribut paparan elemen Kod sampel adalah seperti berikut:

Kod HTML:

<div class="box">
  <p>隐藏的内容</p>
</div>
<button id="toggle">显示/隐藏</button>

Kod CSS:

.box {
  display: none;
}

Kod JavaScript:

document.getElementById("toggle").addEventListener("click", function() {
  var box = document.querySelector(".box");
  if(box.style.display === "none") {
    box.style.display = "block";
  } else {
    box.style.display = "none";
  }
});

2. Gunakan atribut kelegapan

Atribut kelegapan mengawal ketelusan elemen untuk menyembunyikannya atau memaparkan kesan. Apabila sifat kelegapan ditetapkan kepada 0, elemen tersebut akan menjadi telus sepenuhnya, jadi ia tidak dapat dilihat. Apabila sifat kelegapan ialah 1, ia kelihatan sepenuhnya. Tetapi ia masih akan mengambil ruang pada halaman.

Kod HTML:

<div class="box">
  <p>隐藏的内容</p>
</div>
<button id="toggle">显示/隐藏</button>

Kod CSS:

.box {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}

.box.show {
  opacity: 1;
  pointer-events: auto;
}

Kod JavaScript:

document.getElementById("toggle").addEventListener("click", function() {
  var box = document.querySelector(".box");
  box.classList.toggle("show");
});

3. Gunakan atribut keterlihatan

Atribut keterlihatan mengawal sama ada elemen disembunyikan tetapi masih mengekalkan ruangnya, ia tidak mengalih keluar elemen sepenuhnya daripada halaman. Apabila sifat keterlihatan ditetapkan kepada tersembunyi, elemen akan disembunyikan tetapi masih akan menggunakan ruangnya pada halaman. Apabila sifat keterlihatan kelihatan, ia kelihatan sepenuhnya.

Kod HTML:

<div class="box">
  <p>隐藏的内容</p>
</div>
<button id="toggle">显示/隐藏</button>

Kod CSS:

.box {
  visibility: hidden;
}

.box.show {
  visibility: visible;
}

Kod JavaScript:

document.getElementById("toggle").addEventListener("click", function() {
  var box = document.querySelector(".box");
  box.classList.toggle("show");
});

Ringkasnya, tidak kira paparan , kelegapan atau atribut keterlihatan, kesemuanya boleh mencapai kesan penyembunyian dan paparan. Setiap daripada tiga kaedah ini mempunyai kelebihan dan kekurangannya yang tersendiri, dan kita boleh memilih kaedah yang sesuai mengikut keperluan sebenar.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan paparan klik untuk menyembunyikan dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!