klik jquery untuk mengembangkan penggantian teks runtuh

klik jQuery untuk mengembangkan/runtuhkan penggantian teks

Dalam reka bentuk web, kita selalunya perlu menggunakan fungsi kembangkan/runtuhkan, seperti pengembangan senarai, pilihan kotak lungsur, butiran artikel, dsb. Ia agak mudah untuk melaksanakan fungsi ini dengan menggunakan jQuery Mari kita lihat kaedah pelaksanaan khusus.

1. Struktur HTML

Mari kita bina struktur HTML dahulu. Di sini kita ambil perluasan senarai sebagai contoh >di mana , setiap item senarai termasuk tajuk dan kandungan Secara lalai, kami hanya memaparkan tajuk dan bahagian kandungan perlu diklik untuk mengembangkan.

Gaya CSS

2. Seterusnya, kami menetapkan gaya CSS bagi tajuk dan kandungan supaya ia boleh dipaparkan dengan betul dan dibezakan:

<ul class="list">
  <li>
    <h3>标题1</h3>
    <div class="content">内容1</div>
  </li>
  <li>
    <h3>标题2</h3>
    <div class="content">内容2</div>
  </li>
  <li>
    <h3>标题3</h3>
    <div class="content">内容3</div>
  </li>
</ul>

Di sini kita perlu menetapkan gaya tajuk kepada bentuk tangan untuk menunjukkan bahawa ia boleh diklik untuk mengembangkan. Bahagian kandungan disembunyikan secara lalai, jadi atribut paparan perlu ditetapkan kepada tiada.

skrip jQuery

Langkah seterusnya ialah bahagian utama, kita perlu menggunakan jQuery untuk merealisasikan fungsi mengklik tajuk untuk mengembangkan/runtuh. Kaedah pelaksanaan khusus boleh dibahagikan kepada langkah berikut:

Tambahkan pendengar acara klik: Tambahkan pendengar acara klik pada setiap tajuk dan cetuskan acara apabila pengguna mengklik.

1. .list li {
     margin-bottom: 10px;
   }
   
   .list li h3 {
     color: #333;
     cursor: pointer;
     font-size: 16px;
     margin-bottom: 5px;
   }
   
   .list li .content {
     display: none;
     margin-left: 20px;
     font-size: 14px;
     line-height: 1.5;
   }

Cari bahagian kandungan yang sepadan: Gunakan pemilih jQuery untuk mencari bahagian kandungan yang sepadan, dan kemudian paparkan atau sembunyikannya.

2. $('.list li h3').click(function() {
     // to do
   });

Ubah suai teks tajuk: Mengikut status paparan kandungan, ubah suai teks tajuk dan gantikan "kembangkan" dengan "runtuhkan".

3. $('.list li h3').click(function() {
     var content = $(this).siblings('.content');
   
     if (content.is(':visible')) {
       content.hide();
     } else {
       content.show();
     }
   });

Pada ketika ini, kami telah menyelesaikan fungsi klik kembangkan/runtuhkan jQuery yang mudah. Kod lengkap boleh merujuk kepada contoh berikut:

$('.list li h3').click(function() {
  var content = $(this).siblings('.content');

  if (content.is(':visible')) {
    content.hide();
    $(this).text($(this).text().replace('收起', '展开'));
  } else {
    content.show();
    $(this).text($(this).text().replace('展开', '收起'));
  }
});

Di atas ialah cara menggunakan jQuery untuk melaksanakan fungsi klik kembangkan/runtuhkan dan mengubah suai teks tajuk pada masa yang sama. Melalui contoh mudah ini, kami dapati bahawa menggunakan jQuery boleh membantu kami menyelesaikan beberapa kesan interaksi halaman biasa dengan lebih cepat, di samping meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci klik jquery untuk mengembangkan penggantian teks runtuh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!