jquery div menyembunyikan dan tidak menempati ruang

jQuery ialah perpustakaan JavaScript yang digunakan secara meluas dalam pembangunan bahagian hadapan Ia menyediakan pembangun dengan fungsi yang berkuasa untuk memproses dokumen HTML, pengendalian acara, kesan dinamik, dll. Antaranya, div adalah salah satu tag yang sering digunakan dalam pembangunan Kadangkala kita perlu menyembunyikan div tanpa menjejaskan reka letak Dalam kes ini, kita perlu menggunakan jQuery untuk mencapainya.

Dalam jQuery, terdapat dua cara untuk menyembunyikan div: satu ialah menukar sifat paparan div kepada tiada, dan satu lagi adalah menurunkan sifat kelegapannya kepada 0.

Pertama, mari kita lihat cara menyembunyikan div tanpa mengambil ruang dengan menukar atribut paparan. Berikut ialah contoh kod:

<div id="demo" style="background-color: yellow; width: 200px; height: 100px;"></div>
<button id="hide">隐藏div</button>

Dalam kod ini, kami mencipta div dengan demo id, dengan warna latar belakang kuning, lebar 200px dan ketinggian 100px. Pada masa yang sama, kami mencipta butang dengan id hide Apabila kami mengklik butang ini, div akan disembunyikan dan tidak akan mengambil ruang.

Seterusnya, kita perlu menulis beberapa kod jQuery untuk melaksanakan fungsi di atas:

$(document).ready(function() {
    $("#hide").click(function() {
        $("#demo").hide();
    });
});

Fungsi kod di atas adalah sangat mudah, iaitu apabila butang dengan id hide adalah diklik, butang dengan id demo akan disembunyikan. Pada ketika ini, div bukan sahaja tersembunyi, tetapi juga tidak mengambil ruang.

Sudah tentu, kita juga boleh menukar atribut gaya lain semasa menyembunyikan div, seperti mengubah suai warna latar belakang, warna sempadan, dsb. div. Kodnya adalah seperti berikut:

$(document).ready(function() {
    $("#hide").click(function() {
        $("#demo").css({"display": "none", "background-color": "red", "border": "1px solid black"});
    });
});

Dengan kod di atas, kami bukan sahaja menyembunyikan div dan tidak mengambil ruang, tetapi juga mengubah suai warna latar belakang dan warna sempadan div. Di sini, kami menetapkan sifat paparan kepada tiada untuk menjadikan div tidak kelihatan.

Seterusnya, mari lihat cara kedua untuk menyembunyikan div tanpa mengambil ruang, kali ini dengan menukar atribut kelegapan div. Kodnya adalah seperti berikut:

<div id="demo2" style="background-color: blue; width: 200px; height: 100px;"></div>
<button id="hide2">隐藏div</button>

Begitu juga, kami mencipta div dengan id demo2, dengan warna latar belakang biru, lebar 200px dan ketinggian 100px. Dan satu lagi butang dicipta, idnya ialah hide2.

Seterusnya, kami menulis kod jQuery:

$(document).ready(function() {
    $("#hide2").click(function() {
        $("#demo2").css({"opacity": "0"});
    });
});

Dalam kod ini, kami menetapkan sifat kelegapan div kepada 0, menjadikannya telus. Begitu juga, ia tidak mengambil ruang.

Perlu diambil perhatian bahawa walaupun kaedah ini menyembunyikan div, ia mempunyai isu keserasian tertentu untuk penyemak imbas yang tidak menyokong CSS3. Oleh itu, ia perlu ditimbang dengan teliti dalam pembangunan sebenar.

Ringkasnya, terdapat dua cara untuk menyembunyikan div dalam jQuery tanpa menggunakan ruang. Yang pertama ialah menetapkan sifat paparan div kepada tiada, dan yang kedua ialah menetapkan sifat kelegapan div kepada 0. Kedua-dua kaedah ini agak mudah untuk dilaksanakan Pembangun boleh memilih kaedah yang sesuai untuk mereka menyembunyikan div mengikut situasi sebenar.

Atas ialah kandungan terperinci jquery div menyembunyikan dan tidak menempati ruang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!