Rumah > Artikel > hujung hadapan web > Bagaimana untuk menyembunyikan div tanpa mengambil ruang dalam jquery

Bagaimana untuk menyembunyikan div tanpa mengambil ruang dalam jquery

青灯夜游asal: 2021-11-15 18:18:283404semak imbas

Kaedah Jquery untuk menyembunyikan div tanpa menduduki ruang: 1. Gunakan "$("div").css('display','none'); 2. Gunakan "$("div" ) .hide();" pernyataan; 3. Gunakan pernyataan "$("div").toggle();" .

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3.

jquery membenarkan div disembunyikan tanpa menduduki ruang

Jika anda ingin menyembunyikan div tanpa menduduki ruang, anda akan memikirkan untuk menetapkan gaya display:none untuk div.

display:none boleh menyembunyikan elemen tanpa mengambil ruang, jadi menukar atribut ini secara dinamik akan menyebabkan penyusunan semula (tukar susun atur halaman), yang boleh difahami sebagai memadamkan elemen daripada halaman diwarisi oleh keturunan, tetapi keturunannya tidak akan dipaparkan Lagipun, semuanya tersembunyi bersama.

Jadi bagaimana untuk menggunakan jquery untuk menetapkan gaya display:none kepada div? Izinkan saya memperkenalkannya kepada anda di bawah:

Kaedah 1: Gunakan css() untuk menambah gaya display:none

$("div").css(&#39;display&#39;,&#39;none&#39;);

Contoh:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js">
		</script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("div").css(&#39;display&#39;, &#39;none&#39;);
				});
			});
		</script>
	</head>
	<body>

		<div style="border: 1px solid red;">hello</div>
		<br>
		<button>点击按钮，让div不占位隐藏</button>

	</body>
</html>

Bagaimana untuk menyembunyikan div tanpa mengambil ruang dalam jquery

Kaedah 2: Gunakan kaedah hide()

$("div").hide();

kaedah hide() boleh menyembunyikan elemen untuk menambah paparan pada elemen: tiada gaya

Bagaimana untuk menyembunyikan div tanpa mengambil ruang dalam jquery

Kaedah 3: Gunakan kaedah toggle()

$("div").toggle();

togol( kaedah untuk menyemak status kelihatan bagi elemen yang dipilih . Jika elemen disembunyikan, jalankan show() untuk menyembunyikan elemen, dan jika elemen kelihatan, jalankan hide() untuk menunjukkan elemen - ini menghasilkan kesan togol

Cadangan tutorial berkaitan:

Tutorial video jQuery Bagaimana untuk menyembunyikan div tanpa mengambil ruang dalam jquery

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan div tanpa mengambil ruang dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk memadam elemen induk berdasarkan elemen yang ditentukan dalam jqueryArtikel seterusnya：Bagaimana untuk memadam elemen induk berdasarkan elemen yang ditentukan dalam jquery

Artikel berkaitan

Lihat lagi