periksa jQuery jika togol dibuka/ditutup

Gunakan coretan kod jQuery yang mudah untuk memeriksa sama ada elemen togol dihidupkan atau dimatikan. Kaedah yang paling asas ialah menggunakan ujian berikut:

$(this).is(":hidden");

Kaedah lain, seperti yang ditunjukkan dalam contoh berikut, adalah menggunakan atribut data untuk menambahkan status "terbuka" atau "tertutup" ke butang togol:

Plugin JQuery.Autotoggles menyediakan contoh aplikasi praktikal ciri ini.

if (this.data('state') === 'closed') {
    $('.' + toggleBtnClass).text(moreText);
    _this.data('state', 'open'); /* 添加数据以存储状态 */
} else {
    $('.' + toggleBtnClass).text(lessText);
    _this.data('state', 'closed'); /* 添加数据以存储状态 */
}

JQuery Toggle FAQs (FAQs)

Apakah tujuan fungsi togol jQuery?

fungsi togol jQuery adalah alat serba boleh dalam pembangunan web. Ia membolehkan pemaju membuat elemen interaktif di laman web dengan menunjukkan dan menyembunyikan elemen HTML. Fungsi ini boleh digunakan untuk membuat menu drop-down, kawasan yang dilipat, dan komponen interaktif yang lain. Ia berfungsi dengan menukar penglihatan elemen setiap kali ia dicetuskan. Jika elemen dapat dilihat, ia menjadi tersembunyi dan sebaliknya.

bagaimana menggunakan fungsi togol jQuery dalam kod saya?

Untuk menggunakan fungsi togol jQuery, anda perlu memilih elemen HTML yang mana fungsi tersebut akan digunakan, dan kemudian hubungi kaedah

. Berikut adalah contoh asas:

.toggle()

Dalam contoh ini, elemen perenggan tersembunyi dan dipaparkan setiap kali butang diklik.

$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});

Bagaimana untuk menentukan keadaan semasa elemen bertukar?

Untuk menentukan keadaan semasa elemen bertukar, anda boleh menggunakan pemilih

atau

dalam jQuery. Berikut adalah contoh: :visible :hidden

Dalam contoh ini, kaedah

if ($("p").is(":visible")) {
  // 段落可见
} else {
  // 段落隐藏
}

digunakan untuk memeriksa sama ada perenggan yang kini dapat dilihat atau tersembunyi.

.is() Bolehkah saya menggunakan fungsi togol jQuery dengan animasi?

Ya, anda boleh menggunakan fungsi togol jQuery dengan animasi. Dengan lulus parameter ke kaedah

, anda boleh mengawal kelajuan animasi, dan juga menambah fungsi panggil balik yang dilaksanakan selepas animasi selesai. Berikut adalah contoh:

.toggle()

Dalam contoh ini, perenggan akan disembunyikan dan dipaparkan dengan animasi yang perlahan. Selepas animasi selesai, fungsi panggil balik akan dilaksanakan.

$("p").toggle("slow", function(){
  // 动画完成。
});

Apakah perbezaan antara fungsi togol jQuery dan harta paparan CSS?

Kedua -dua fungsi togol jQuery dan atribut paparan CSS mengawal keterlihatan elemen HTML, tetapi mereka bekerja sedikit berbeza. CSS memaparkan harta mengawal susun atur elemen pada halaman. Apabila sifat paparan elemen ditetapkan kepada "tiada", elemen itu dikeluarkan dari susun atur dan unsur -unsur sekitar mengisi ruang mereka. Sebaliknya, fungsi togol jQuery hanya mengubah penglihatan unsur -unsur tanpa menjejaskan susun atur halaman.

Bolehkah saya menggunakan fungsi togol jQuery untuk menukar antara dua fungsi?

Ya, anda boleh beralih antara dua fungsi menggunakan fungsi togol jQuery. Ini dilakukan dengan lulus dua parameter fungsi ke kaedah

. Berikut adalah contoh:

.toggle()

Dalam contoh ini, fungsi pertama dilaksanakan apabila butang diklik, menyembunyikan perenggan. Fungsi kedua dilaksanakan pada kali kedua butang diklik, menunjukkan perenggan.

$("button").toggle(
  function() {
    $("p").hide();
  },
  function() {
    $("p").show();
  }
);

Bagaimana untuk membuat menu drop-down menggunakan fungsi togol jQuery?

Untuk membuat menu drop-down menggunakan fungsi togol jQuery, anda boleh memaparkan dan menyembunyikan senarai pautan apabila butang diklik. Berikut adalah contoh asas:

$(this).is(":hidden");

Dalam contoh ini, kelas .dropdown-menu digunakan untuk memilih menu drop-down. Menu tersembunyi dan dipaparkan setiap kali butang diklik.

Bolehkah saya menggunakan fungsi togol jQuery dengan kaedah jQuery yang lain?

Ya, anda boleh menggunakan fungsi togol jQuery dengan kaedah jQuery yang lain. Sebagai contoh, anda boleh menggunakan kaedah .css() untuk menukar gayanya semasa menukar elemen. Berikut adalah contoh:

if (this.data('state') === 'closed') {
    $('.' + toggleBtnClass).text(moreText);
    _this.data('state', 'open'); /* 添加数据以存储状态 */
} else {
    $('.' + toggleBtnClass).text(lessText);
    _this.data('state', 'closed'); /* 添加数据以存储状态 */
}

Dalam contoh ini, setiap kali butang diklik, perenggan tersembunyi dan dipaparkan dan warna teksnya berubah menjadi merah.

Apakah versi fungsi togol sokongan jQuery?

jQuery 1.0 dan kemudian menyokong fungsi togol jQuery. Walau bagaimanapun, sintaks dan fungsi kaedah .toggle() telah diubah dalam pelbagai versi jQuery. Ia sentiasa disyorkan untuk menyemak versi dokumentasi jQuery yang anda gunakan untuk memastikan kaedah .toggle() digunakan dengan betul.

Bolehkah saya menukar antara lebih daripada dua negeri menggunakan fungsi togol jQuery?

fungsi togol jQuery direka untuk beralih antara dua negeri: kelihatan dan tersembunyi. Jika anda perlu menukar antara lebih daripada dua negeri, anda perlu menulis kod tersuai atau menggunakan plugin. Walau bagaimanapun, anda boleh menggunakan kaedah .toggle() pada unsur -unsur yang berlainan beberapa kali untuk mewujudkan komponen interaktif yang kompleks.

Atas ialah kandungan terperinci periksa jQuery jika togol dibuka/ditutup. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!