jquery kembangkan dekat

Dalam pembangunan bahagian hadapan moden, jQuery telah menjadi perpustakaan JavaScript kegemaran di kalangan pembangun. Ia menggunakan sintaks ringkas dan kaedah yang mudah difahami untuk mengendalikan operasi DOM, pengendalian acara dan kesan animasi. Artikel ini akan meneroka cara menggunakan jQuery untuk mengembangkan dan menutup elemen.

1. Pra-pengetahuan

Sebelum anda mula menggunakan jQuery untuk mengembangkan dan menutup elemen, anda perlu memahami beberapa pengetahuan asas hadapan. Yang pertama ialah penguasaan sifat CSS, terutamanya sifat paparan dan keterlihatan. Di permukaan, mereka berdua menyembunyikan unsur, tetapi mereka sangat berbeza.

Apabila atribut paparan elemen ditetapkan kepada "tiada", elemen itu dialih keluar sepenuhnya dan tidak mengambil sebarang ruang. Apabila sifat keterlihatan elemen ditetapkan kepada "tersembunyi", elemen itu masih wujud, tetapi ia masih menggunakan ruang, ia hanya tidak kelihatan.

2. Tambah fungsi pengembangan dan penutupan pada elemen

Dalam jQuery, kita boleh menggunakan kaedah slideToggle() untuk melengkapkan fungsi pengembangan dan penutupan elemen. Kaedah ini secara automatik mengesan sama ada elemen itu boleh dilihat dan mengembang atau menutup elemen berdasarkan keterlihatannya. Berikut ialah contoh mudah yang menunjukkan cara menggunakan slideToggle() untuk menogol paparan elemen div:

<button id="toggle">展开/关闭</button>
<div id="content">这里是内容</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(function() {
    $('#toggle').click(function() {
      $('#content').slideToggle();
    });
  });
</script>

Dalam contoh ini, apabila pengguna mengklik butang, kod JavaScript memanggil kaedah slideToggle(), Kaedah untuk mengembangkan atau menutup elemen div berdasarkan keterlihatannya.

3. Gaya tersuai

Selain menggunakan kesan animasi jQuery lalai, kami juga boleh menyesuaikan gaya melalui CSS untuk menjadikan animasi pengembangan dan penutupan lebih diperibadikan. Berikut ialah contoh yang menunjukkan cara menukar warna latar belakang elemen apabila ia dikembangkan dan ditutup:

<button id="toggle">展开/关闭</button>
<div id="content">这里是内容</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(function() {
    $('#toggle').click(function() {
      $('#content').slideToggle('slow', function() {
        $(this).toggleClass('open');
      });
    });
  });
</script>

<style>
  #content {
    background-color: #eee;
    display: none;
    padding: 20px;
  }

  .open {
    background-color: #ffa;
  }
</style>

Dalam contoh ini, kami mentakrifkan kelas CSS terbuka yang akan ditambahkan pada elemen apabila ia dikembangkan atasan. Apabila butang kembangkan diklik sekali lagi, kelas terbuka dialih keluar daripada elemen. Ini membolehkan kami menggunakan gaya CSS untuk menyesuaikan penampilan yang dikembangkan dan tertutup.

4. Menunjukkan dan menyembunyikan beberapa elemen

Akhir sekali, mari laksanakan fungsi yang lebih maju: mengembangkan dan menutup satu elemen dalam elemen lain. Dalam kes ini, kita perlu menggunakan kaedah siblings() jQuery. Kaedah ini membolehkan kami mencari semua elemen pada tahap yang sama dengan elemen yang dipilih supaya kami boleh mengembangkan atau menutupnya.

Berikut ialah contoh yang menunjukkan cara untuk menunjukkan dan menyembunyikan elemen dd dalam elemen dl pada tahap yang sama apabila pautan diklik:

<a href="#">展开dd元素</a>
<dl>
  <dt>元素1</dt>
  <dd>这是元素1的描述</dd>
  <dt>元素2</dt>
  <dd>这是元素2的描述</dd>
  <dt>元素3</dt>
  <dd>这是元素3的描述</dd>
</dl>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(function() {
    $('a').click(function() {
      var dd = $(this).siblings('dl').find('dd');
      dd.slideToggle('slow', function() {
        if (dd.is(':visible')) {
          $('a').text('隐藏dd元素');
        } else {
          $('a').text('展开dd元素');
        }
      });
      return false; // 必须！
    });
  });
</script>

<style>
  dd {
    display: none;
    padding: 10px;
    background-color: #eee;
    margin: 0;
  }
</style>

Dalam contoh ini, kami menggunakan siblings() kaedah untuk mencari elemen dl pada tahap yang sama dengan pautan, dan gunakan kaedah find() untuk mencari semua elemen dd. Apabila pautan diklik, kami mengembangkan atau menutup semua elemen dd dan menukar teks pautan untuk menggambarkan keadaannya.

5. Ringkasan

jQuery ialah perpustakaan JavaScript yang berkuasa yang boleh digunakan untuk menulis aplikasi web dinamik dan interaktif dengan cepat. Dalam artikel ini, kami mempelajari cara menggunakan jQuery untuk mengembangkan dan menutup elemen, dan menyesuaikan animasi elemen tersebut. Kami juga melihat cara menggunakan kaedah siblings() untuk mencari dan mengendalikan elemen pada tahap yang sama. Teknologi ini sangat berguna untuk mencipta aplikasi web moden, jadi pembangun disyorkan untuk memahaminya secara mendalam dan menggunakannya dalam projek mereka sendiri.

Atas ialah kandungan terperinci jquery kembangkan dekat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!