首頁 > web前端 > 前端問答 > jquery怎麼實現點擊元素相鄰元素隱藏

jquery怎麼實現點擊元素相鄰元素隱藏

青灯夜游
發布: 2022-03-25 18:05:01
原創
1649 人瀏覽過

方法:1、用click()給元素綁定點擊事件,並設定處理函數;2、在處理函數中,用next()和prev()函數取得相鄰元素,並用hide( )將獲取到的元素隱藏,語法為「元素.next().hide();元素.prev().hide()」。

jquery怎麼實現點擊元素相鄰元素隱藏

本教學操作環境:windows7系統、jquery1.10.2版本、Dell G3電腦。

jquery實作點擊元素,其相鄰元素隱藏

#實作方式:

  • ##使用click()函數給予指定元素綁定點擊事件,並設定處理函數

  • 在處理函數中,使用next()和prev()函數取得相鄰元素,並使用hide ()函數將取得的元素隱藏

    • next():用來取得下一個同儕元素。


    • prev():用來取得上一個同儕元素。

實作程式碼:

<!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>
登入後複製

jquery怎麼實現點擊元素相鄰元素隱藏

【推薦學習:

jQuery影片教學web前端影片#

以上是jquery怎麼實現點擊元素相鄰元素隱藏的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板