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 --- 收缩兄弟元素相关推荐

jQuery中兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
jQuery - 获取兄弟元素
获取指定元素的兄弟元素时,可以使用 adjacent sibling combinator (+),其中 +的两侧内容都是selector expression. 如果要获取下例中所有的 h1的直接 ...
jQuery获取兄弟元素的各种方法总结
1.next();//获取当前元素的下一个兄弟元素 2.nextAll();//获取当前元素后面所有的兄弟元素 3.prev();//获取当前元素的前一个兄弟元素 4.prevAll();//获取当前 ...
jQuery 兄弟元素选择器
本篇文章介绍jQuery的兄弟元素选择器什么是兄弟元素? <ul id="list"><li class="li-1">web-725 ...
jq获取兄弟节点_jQuery 获取兄弟元素的几种方法
jQuery 获取兄弟元素的几种方法. 获取指定元素的兄弟元素时,可以使用adjacent sibling combinator (+),其中+的两侧内容都是selector expression. ...
jquery兄弟标签_js jquery获取当前元素的兄弟级上一个下一个元素
var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得 ...
jquery js 兄弟父元素的获取
jQuery提供的方法上来就把jQuery提供的方法摆在这里是不是有点不好呀,不过,我们从jQuery的方法名称上就能知道这些方法是干嘛的了. parent(selector) 查找父元素,可传入s ...
html 获取下一个兄弟节点,js jquery获取当前元素的兄弟级上一个下一个元素
var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得 ...
jquery获取元素（父级的兄弟元素的子元素）
一.获取父级元素使用jquery获取父级元素: parent() 例如:$(this).parent('ul'); 二.获取同级元素使用jquery获取同级元素:siblings() 例如:$(t ...

jquery --- 收缩兄弟元素

jquery --- 收缩兄弟元素相关推荐

最新文章

热门文章