jquery hide toolbar

Dalam reka bentuk web, kadangkala kita perlu menyembunyikan beberapa bar alat atau butang untuk meningkatkan keindahan dan kesederhanaan halaman. Fungsi ini boleh dicapai dengan sangat mudah menggunakan jQuery.

Mula-mula anda perlu mencipta halaman HTML yang mengandungi butang atau bar alat dan menambah perpustakaan jQuery padanya. Seterusnya kita boleh menyembunyikan elemen berkaitan dengan mudah menggunakan kod berikut:

$(document).ready(function(){
  $("button").click(function(){
    $("工具栏的选择器").hide();
  });
});

Di sini kita mentakrifkan butang bernama "butang" dan menggunakan fungsi click() jQuery untuk mendengar tindakan klik. Apabila butang diklik, fungsi hide() akan dipanggil untuk menyembunyikan bar alat yang ditentukan.

Selain fungsi hide(), terdapat juga fungsi show() yang boleh digunakan untuk memaparkan elemen tersembunyi.

Selain itu, untuk mengelakkan elemen tersembunyi meninggalkan kawasan kosong, kita boleh menggunakan fungsi slideDown() dan slideUp() untuk menghidupkan unsur naik atau turun.

$(document).ready(function(){
  $("button").click(function(){
    $("工具栏的选择器").slideDown();
  });
});

Di sini, fungsi slideDown() digunakan untuk menghidupkan bar alat apabila butang diklik.

Begitu juga, fungsi slideUp() boleh menyembunyikan elemen dalam cara animasi.

Selain itu, kami juga boleh menggunakan sifat CSS display:none dan display:block untuk menyembunyikan dan menunjukkan elemen. Kaedah ini segera menyembunyikan atau menunjukkan elemen tanpa animasi.

$(document).ready(function(){
  $("button").click(function(){
    $("工具栏的选择器").css("display", "none");
  });
});

Di sini, gunakan sifat CSS display:none untuk menyembunyikan bar alat apabila butang diklik.

Secara keseluruhan, ia adalah sangat mudah dan mudah untuk menggunakan jQuery untuk menyembunyikan bar alat atau butang. Kita boleh memilih untuk menggunakan fungsi hide() dan show(), fungsi slideDown() dan slideUp() atau sifat CSS display:none dan display:block untuk mencapainya. Sama ada cara, anda boleh menjadikan halaman lebih cantik dan ringkas.

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