jquery --- 收缩兄弟元素
生活随笔
收集整理的這篇文章主要介紹了
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
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的jquery --- 收缩兄弟元素的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python linux 打印机,Pyt
- 下一篇： jquery --- 网页选项卡