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 <div> untuk membalut elemen teks dan butang yang perlu dikembangkan dan diruntuhkan. Dalam teg <code><div>, kami menggunakan teg <code><p></p> untuk memaparkan kandungan teks yang perlu dikembangkan dan diruntuhkan di bawah kandungan teks, kami menggunakan teg <button></button> 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 <p></p> 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 <p></p> sepadan dengan teks yang perlu dikembangkan dan diruntuhkan dan elemen <button></button> 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 <p></p> 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.