Cara menggunakan jQuery untuk membuka dan menutup fungsi Div

Dalam pembangunan web moden, kesan interaktif telah menjadi bahagian penting dalam laman web. Antaranya, pembukaan dan penutupan dinamik Div ​​adalah fungsi yang kerap digunakan Fungsi ini dapat meningkatkan pengalaman pengguna dan meningkatkan nilai penggunaan laman web.

Dalam artikel ini, kami akan memperkenalkan cara menggunakan jQuery untuk merealisasikan fungsi membuka dan menutup Div. Mari mulakan!

1. Struktur kod HTML
Pertama, kita perlu menulis struktur kod HTML untuk melaksanakan fungsi ini. Kodnya adalah seperti berikut:

<div class="container">
  <div class="trigger"></div>
  <div class="panel">
    <p>这里是面板内容</p>
  </div>
</div>

Di sini, kami menggunakan elemen bekas "bekas", yang mengandungi elemen tajuk "pencetus" dan elemen panel "panel".

2. Gaya CSS
Kita boleh menggunakan CSS untuk menentukan gaya bekas, tajuk dan panel. Kodnya adalah seperti berikut:

.container {
  position: relative;
  width: 500px;
  margin: 0 auto;
}

.trigger {
  position: relative;
  height: 50px;
  background-color: #EEE;
}

.panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
  background-color: #FFF;
}

Dalam kod CSS ini, kami menetapkan bekas supaya berada pada kedudukan dan berpusat secara relatif. Pengepala ditakrifkan sebagai elemen peringkat blok dengan warna latar belakang, manakala panel ditetapkan pada kedudukan mutlak dan mempunyai ketinggian 0, yang bermaksud panel tidak kelihatan pada halaman. Pada masa yang sama, kami menambah kesan peralihan pada panel supaya apabila ia dibuka atau ditutup, ketinggian akan berubah secara beransur-ansur dalam 0.3 saat. Akhir sekali, kami menetapkan warna latar belakang panel kepada putih.

3. Kod JS
Seterusnya, kita perlu menggunakan jQuery untuk menulis kod JS untuk melaksanakan fungsi ini. Kodnya adalah seperti berikut:

$(document).ready(function() {
  $('.trigger').click(function() {
    var panel = $(this).next('.panel');
    if (panel.height() == 0) {
      panel.css('height', panel.prop('scrollHeight') + 'px');
    } else {
      panel.css('height', '0');
    }
  });
});

Dalam kod ini, kami menggunakan simbol "$" jQuery dan bukannya kata kunci "jQuery", supaya kod kami kelihatan lebih ringkas.

Kami mula-mula membungkus fungsi ini dalam fungsi $(document).ready(), iaitu fungsi jQuery, yang menunjukkan bahawa fungsi yang sepadan akan dilaksanakan apabila DOM halaman dimuatkan.

Seterusnya, kami menggunakan kaedah ".click()" untuk mengikat pengendali acara pada elemen tajuk. Apabila elemen tajuk diklik, pengendali acara akan dipecat. Kami menggunakan kaedah ".next()" jQuery untuk mendapatkan elemen seterusnya, dalam kes ini elemen panel. Kami kemudian menyemak ketinggian elemen panel, dan jika ia adalah 0, kami menetapkan ketinggian elemen panel kepada ketinggian tatalnya jika tidak, kami menetapkan ketinggiannya kepada 0, untuk menutupnya;

4. Kesimpulan
Dalam artikel ini, kami telah mempelajari cara menggunakan jQuery untuk merealisasikan fungsi membuka dan menutup Div. Walaupun ini hanyalah contoh mudah, ia menggambarkan cara menggunakan jQuery untuk mengawal dan memanipulasi elemen halaman. Kita harus ambil perhatian bahawa apabila kita melaksanakan kesan dinamik, beberapa sifat CSS dan fungsi jQuery mungkin perlu dilaraskan pada pelayar atau peranti yang berbeza. Walau bagaimanapun, jQuery, sebagai perpustakaan JavaScript sumber terbuka, telah memainkan peranan penting dalam pembangunan web, dan ia akan terus menjadi salah satu alat yang kami gunakan dalam pembangunan bahagian hadapan.

Atas ialah kandungan terperinci Cara menggunakan jQuery untuk membuka dan menutup fungsi Div. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!