jquery --- 收縮兄弟元素

在這里插入圖片描述
點擊高亮的收縮兄弟元素.
思路:
1.點擊的其實是tr.(類為parent)
2.toggleClass可以切換樣式
3.slblings(’.class’).toggle 可以根據其類來進行隱藏顯示

代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><style>.parent{background: #fff38f;cursor: pointer;}.child{background: #ffe}.parent td{text-align: center;}.selected{background: red;}
</style>
</head>
<body><table><thead><tr><th>姓名</th><th>性別</th><th>暫住地</th></tr></thead><tbody><tr class="parent" id="row01"><td colspan="3">前臺設計小組</td></tr><tr class="child row01"><td>張山</td><td>男</td><td>浙江寧波</td></tr><tr class="child row01"><td>李四</td><td>女</td><td>浙江杭州</td></tr><tr class="parent" id="row02"><td colspan="3">前臺開發組</td></tr><tr class="child row02"><td>王五</td><td>男</td><td>湖南長沙</td></tr><tr class="child row02"><td>趙六</td><td>女</td><td>浙江溫州</td></tr><tr class="parent" id="row03"><td colspan="3">后臺開發組</td></tr><tr class="child row03"><td>Rain</td><td>男</td><td>浙江杭州</td></tr><tr class="child row03"><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr></tbody></table><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>$('.parent').click(function(){$(this).toggleClass('selected').siblings("." + this.id).toggle('100')})
</script></body>
</html>

參考《鋒利的jQuery》(第2版)P160~P161

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/250958.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/250958.shtml
英文地址，請注明出處：http://en.pswp.cn/news/250958.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！