teks jquery hide klik untuk menunjukkan lebih banyak

Dengan perkembangan teknologi Internet, pengalaman pengguna laman web semakin mendapat perhatian. Dalam reka bentuk laman web, cara untuk memaparkan kandungan dengan lebih baik dan meningkatkan pengalaman membaca pengguna telah menjadi topik penting.

Untuk kandungan halaman yang panjang, untuk mengelakkan halaman menjadi terlalu panjang, kami biasanya menggunakan kaedah lipatan teks atau klik lebih banyak, supaya pengguna boleh memilih sama ada untuk mengembangkan teks penuh. Dalam pembangunan web, jQuery ialah salah satu perpustakaan alat yang digunakan secara meluas Di bawah kita akan menggunakan contoh untuk menunjukkan cara menggunakan jQuery untuk mencapai kesan mengklik lebih untuk dipaparkan.

Pertama, kita perlu memperkenalkan perpustakaan jQuery, yang boleh diperkenalkan melalui CDN, atau anda boleh memuat turun perpustakaan jQuery secara tempatan dan mengimportnya. Mengambil kaedah CDN sebagai contoh, kodnya adalah seperti berikut:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Seterusnya, kita perlu melaksanakan reka letak yang berkaitan dalam HTML, contohnya:

<div class="card">
  <h2>这是一个标题</h2>
  <p>这是一段文字，可能比较长，需要进行折叠。</p>
  <a class="show-more">更多</a>
  <a class="show-less">收起</a>
</div>

Dalam contoh ini, kita menggunakan pengepala dengan tajuk dan susun atur kad kandungan serta menambah dua pautan, "Lagi" dan "Runtuh".

Seterusnya, kita boleh menggunakan jQuery untuk mencapai kesan mengklik lebih banyak untuk dipaparkan. Kod khusus adalah seperti berikut:

$(function() {
  // 隐藏“收起”链接
  $(".show-less").hide();
  // 获取要显示的元素
  var content = $(".card p");
  // 要显示的字符数
  var chars = 100;
  // 如果内容长度小于字符数，不进行折叠处理
  if (content.text().length > chars) {
    // 隐藏超出字符数的内容
    var short = content.text().substr(0, chars);
    var long = content.text().substr(chars);
    content.html(short + '<span class="d-inline-block ellipsis">...</span><span class="long d-none">' + long + '</span>');
    // 点击更多
    $(".show-more").click(function() {
      $(this).hide();
      $(".show-less").show();
      $(".card p .long").removeClass("d-none");
      $(".card p .ellipsis").addClass("d-none");
    });
    // 点击收起
    $(".show-less").click(function() {
      $(this).hide();
      $(".show-more").show();
      $(".card p .long").addClass("d-none");
      $(".card p .ellipsis").removeClass("d-none");
    });
  }
});

Logik kod di atas adalah kira-kira seperti berikut:

1. Mula-mula, kami menyembunyikan pautan "Rubuh", kerana dalam keadaan awal, elemen yang akan dipaparkan telah pun Merupakan keadaan terlipat; untuk dipaparkan adalah kurang daripada bilangan aksara, tiada pemprosesan lipatan dilakukan;
2. Apabila pengguna mengklik pautan "Lagi", kita perlu menyembunyikan kandungan yang melebihi bilangan aksara Kembangkan kandungan yang melebihi bilangan aksara dan menyembunyikan simbol "..." dan ". Pautan Lagi";
3. Apabila pengguna mengklik pautan "Runtuhkan", kami perlu meruntuhkan kandungan yang melebihi bilangan aksara dan Menunjukkan simbol "..." dan pautan "Lagi".
4. Logik di atas sebenarnya sangat mudah, tetapi banyak perkara yang perlu diberi perhatian. Di bawah ini kami menerangkan beberapa perkara penting.
5. Pertama, kami menambah elemen dengan kelas ".long" dalam HTML untuk menyembunyikan kandungan yang melebihi bilangan aksara. Ia boleh ditakrifkan seperti ini dalam CSS:

6. .long {
     white-space: pre-wrap;
   }

Di sini kami menetapkan atribut ruang putihnya kepada "pra-bungkus", terutamanya untuk mengelakkan perkataan daripada dipotong. Dalam penyemak imbas, nilai atribut ruang putih ialah "biasa" secara lalai, iaitu, ia tidak akan membalut garisan secara automatik dan hanya akan memecahkan baris apabila ruang atau aksara tab ditemui.

Kedua, kami menambah elemen dengan kelas ".ellipsis" dalam HTML untuk menambah elipsis "...". Ia boleh ditakrifkan seperti ini dalam CSS:

.ellipsis:before {

  font-weight: bold;
}

Akhir sekali, kita perlu ambil perhatian bahawa apabila mengikat acara jQuery, acara klik digunakan. Dengan pembangunan HTML5, acara klik tidak begitu mesra di bahagian mudah alih, kerana acara sentuhan pada bahagian mudah alih adalah serupa dengan acara klik, tetapi tidak sama persis. Untuk serasi dengan pelbagai peranti dan penyemak imbas, adalah disyorkan untuk menggunakan kaedah on jQuery untuk mengikat acara Anda boleh memilih acara terikat mengikut keperluan sebenar.

Ringkasnya, fungsi klik-untuk-pamer berasaskan jQuery boleh memberikan pengalaman pengguna yang baik untuk tapak web kami, membolehkan pengguna memilih dengan lebih bebas sama ada untuk mengembangkan semua kandungan.

Atas ialah kandungan terperinci teks jquery hide klik untuk menunjukkan lebih banyak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!