Bagaimana untuk menyembunyikan unsur bersebelahan unsur yang diklik dalam jquery-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menyembunyikan unsur bersebelahan unsur yang diklik dalam jquery

青灯夜游

Lepaskan： 2022-03-25 18:05:01

asal

1650 orang telah melayarinya

Kaedah: 1. Gunakan klik() untuk mengikat acara klik pada elemen dan tetapkan fungsi pemprosesan; 2. Dalam fungsi pemprosesan, gunakan fungsi seterusnya() dan sebelumnya() untuk mendapatkan elemen bersebelahan, dan gunakan hide( ) akan menyembunyikan elemen yang diperolehi, sintaksnya ialah "element.next().hide(); element.prev().hide()".

Bagaimana untuk menyembunyikan unsur bersebelahan unsur yang diklik dalam jquery

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

jquery melaksanakan klik pada elemen dan menyembunyikan elemen bersebelahannya Fungsi click() mengikat acara klik pada elemen yang ditentukan dan menetapkan fungsi pemprosesan

Dalam fungsi pemprosesan, gunakan fungsi next() dan prev() untuk mendapatkan elemen bersebelahan, dan gunakan fungsi hide () menyembunyikan elemen yang diperoleh

next(): digunakan untuk mendapatkan elemen adik beradik seterusnya.
prev(): digunakan untuk mendapatkan elemen adik beradik sebelumnya.

tutorial video jQuery

、

video bahagian hadapan web

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-1.10.2.min.js"></script>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script>
			$(document).ready(function() {
				$("li.start").css({
					"color": "red",
					"border": "2px solid red"
				});
				$("li.start").click(function() {
					$("li.start").next().hide();
					$("li.start").prev().hide();
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (父节点)
				<li>li </li>
				<li>li (类名为"star"的相邻元素)</li>
				<li class="start">类名称为“star”的li元素</li>
				<li>li (类名为"star"的相邻元素)</li>
				<li>li </li>
			</ul>
		</div>
		<p>点击类名称为“star”的li元素，隐藏其相邻的两个元素</p>
	</body>
</html>

Salin selepas log masuk

】

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan unsur bersebelahan unsur yang diklik dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!