Javascript melaksanakan pengembangan dan keruntuhan sekeping teks

JavaScript melaksanakan fungsi kembangkan dan runtuhkan perenggan teks

Memandangkan reka bentuk web memberi lebih banyak perhatian kepada pengalaman pengguna, semakin banyak reka bentuk halaman perlu mengembangkan atau meruntuhkan perenggan teks ini Kadangkala kita boleh menggunakan kod JavaScript untuk mencapai fungsi ini. Mari kita lihat cara menggunakan JavaScript untuk mengembangkan dan meruntuhkan sekeping teks.

1. Kod HTML

Pertama, kita perlu menyediakan sekeping kod HTML ini boleh menjadi teks yang perlu dikembangkan dan diruntuhkan, serta elemen halaman yang lain. Kod sampel adalah seperti berikut:

<div class="content">
  <p>这是一段需要展开收起的文字，可以有很多很多的字，可能会占据很多的空间。因此，在默认情况下，我们只会显示部分文字，而把其余的部分折叠起来。如果需要查看全部内容，可以点击“查看更多”按钮，文字内容就会展开显示了。</p>
  <button class="btn-more">查看更多</button>
</div>

Dalam kod ini, kami menggunakan tag dc6dce4a544fdca2df29d5ac0ea9906b untuk membalut elemen teks dan butang yang perlu dikembangkan dan diruntuhkan. Dalam teg dc6dce4a544fdca2df29d5ac0ea9906b, kami menggunakan teg e388a4556c0f65e1904146cc1a846bee untuk memaparkan kandungan teks yang perlu dikembangkan dan diruntuhkan di bawah kandungan teks, kami menggunakan teg bb9345e55eb71822850ff156dfde57c8 untuk memaparkan butang "Lihat Lagi".

2. Gaya CSS

Kita perlu menggunakan CSS untuk menetapkan gaya teks yang perlu dikembangkan dan diruntuhkan dalam keadaan lalai dan dikembangkan.

.content p {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 设置文字溢出时显示省略号 */
}

.content p.is-expanded {
  overflow: visible;
  white-space: normal;
  /* 文字溢出时不再显示省略号 */
}

.btn-more {
  display: block;
  margin-top: 10px;
  cursor: pointer;
  /* 设置鼠标指针为手型 */
}

3. Kod JavaScript

Seterusnya, kita perlu menggunakan kod JavaScript untuk melaksanakan acara klik butang "Lihat Lagi" supaya ia boleh dikembangkan atau diruntuhkan apabila butang diklik Teks yang perlu dikembangkan atau diruntuhkan.

Pertama, kita boleh mencipta pembolehubah untuk menyimpan sama ada ia kini dalam keadaan dikembangkan Keadaan awal adalah palsu, yang bermaksud ia berada dalam keadaan runtuh.

let isExpanded = false;

Apabila pengguna mengklik butang "Lihat Lagi", kita perlu mendapatkan elemen e388a4556c0f65e1904146cc1a846bee yang perlu mengembangkan dan meruntuhkan teks dan menambah atau mengalih keluar kelas is-expanded untuk elemen ini. Pada masa yang sama, tukar kandungan teks butang untuk memaparkan "Kurang" atau "Lihat Lagi" untuk mengingatkan pengguna tentang status teks semasa.

const content = document.querySelector('.content');
const btnMore = document.querySelector('.btn-more');

btnMore.addEventListener('click', function() {
  const paragraph = content.querySelector('p');
  isExpanded = !isExpanded;
  
  if (isExpanded) {
    paragraph.classList.add('is-expanded');
    btnMore.innerText = '收起';
  } else {
    paragraph.classList.remove('is-expanded');
    btnMore.innerText = '查看更多';
  }
});

Dalam kod ini, kami mula-mula menggunakan kaedah document.querySelector() untuk mendapatkan elemen e388a4556c0f65e1904146cc1a846bee sepadan dengan teks yang perlu dikembangkan dan diruntuhkan dan elemen bb9345e55eb71822850ff156dfde57c8 sepadan dengan "Lihat Lagi" butang. Kemudian, tambahkan pendengar acara klik pada elemen butang, yang akan mencetuskan acara ini apabila pengguna mengklik butang.

Dalam pendengar acara, kami akan menggunakan status pembolehubah isExpanded untuk menentukan sama ada teks semasa berada dalam keadaan dikembangkan atau diruntuhkan. Jika ia berada dalam keadaan dikembangkan, kami akan menambah kelas e388a4556c0f65e1904146cc1a846bee pada elemen is-expanded dan menetapkan teks butang kepada "Rubuh". Sebaliknya, kami akan mengalih keluar kelas is-expanded dan menetapkan teks butang kepada "Lihat lagi".

Setakat ini, kami telah berjaya melaksanakan fungsi kembangkan dan runtuh sekeping teks. Apabila pengguna mengklik butang "Lihat Lagi", teks yang perlu dikembangkan atau diruntuhkan boleh dikembangkan atau diruntuhkan, menjadikan halaman lebih ringkas dan lebih mudah dibaca.

Atas ialah kandungan terperinci Javascript melaksanakan pengembangan dan keruntuhan sekeping teks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!