点击li ,父辈出现; 子级,子辈不出现. prevUntil ---> 前面多个, 截止到 截止元素 , prev([expr]) --> 前面一个.
要求:
1. 点击第一级 [1知识点] 的时候, [1知识点] 前有 圆圈.
点击 第二级 [1-1知识点, 1-2知识点, 1-3知识点] 时 , [1知识点]出现 圆圈.
2. 点击 第一级[2知识点] 或者 第二级[2-1知识点, 2-2知识点]的时候, [2知识点] 出现圆圈, [1知识点] 前 圆圈 隐藏.
---------------------------------------------------------------------------
html:
<ul> <li date-level="0" onclick="changeDetails(1, this)"> <span class="circleChose hide">1</span> <span class="rightListContent">1知识点</span>
</li> <li date-level="1" onclick="changeDetails(2, this)"> <span class="rightListContentSub">1-1知识点</span>
</li> <li date-level="1" onclick="changeDetails(3, this)"> <span class="rightListContentSub">1-2知识点</span>
</li> <li date-level="1" onclick="changeDetails(4, this)"> <span class="rightListContentSub">1-3知识点</span>
</li> <li date-level="1" onclick="changeDetails(8, this)"> <span class="rightListContentSub">1-4知识点</span>
</li> <li date-level="0" onclick="changeDetails(5, this)"> <span class="circleChose">2</span> <span class="rightListContent">2知识点</span>
</li> <li date-level="1" onclick="changeDetails(6, this)"> <span class="rightListContentSub">2-1知识点</span>
</li> <li date-level="1" onclick="changeDetails(7, this)"> <span class="rightListContentSub">2-2知识点</span>
</li> </ul>
JavaScript:
function changeDetails(knowledgeId, node)
{
// console.log($(node).attr('date-level')); //判断点击的是一级 还是二级.
if ($(node).attr('date-level') == 0) {
//显示当前节点
if ($(node).find('.circleChose').hasClass('hide')) {
$(node).find('.circleChose').removeClass('hide');
} //隐藏其他节点:
$(node).siblings('li').each(function(index, el) {
if (!$(this).find('.circleChose').hasClass('hide')) {
$(this).find('.circleChose').addClass('hide');
}
});
} else {
//二级:
$(node).prevUntil("li[date-level = 0]");
// console.log($(node).prevUntil("li[date-level = 0]"));
//找到直到 data-level = 0 为止的所有选项.
var tempList = $(node).prevUntil("li[date-level = 0]"); if (tempList.length == 0) {
//当前是第一个子节点:
//显示当前节点
// console.log('222');
if ($(node).prev().find('.circleChose').hasClass('hide')) {
$(node).prev().find('.circleChose').removeClass('hide');
} //隐藏其他节点:
$(node).prev().siblings('li').each(function(index, el) {
if (!$(this).find('.circleChose').hasClass('hide')) {
$(this).find('.circleChose').addClass('hide');
}
});
} else {
// tempList.last().prev()
//显示当前节点
// console.log('333');
if (tempList.last().prev().find('.circleChose').hasClass('hide')) {
tempList.last().prev().find('.circleChose').removeClass('hide');
} //隐藏其他节点:
tempList.last().prev().siblings('li').each(function(index, el) {
if (!$(this).find('.circleChose').hasClass('hide')) {
$(this).find('.circleChose').addClass('hide');
}
}); }
} getDetails(knowledgeId);
}
对于 prevUtil(). : 查找 之前 的所有同辈 元素 , 不包括 自己 和 截止元素.
1 , 1-1, 1-2, 1-3, 1-4, 1-5, 2, 2-1, 2-2 : 注意: 1在最上边, 2 在最下面. 它们都是同级的.
如果是
1-1 .prevUntil(1) ----> 返回的是空的. length 为 0 .
1-2. prevUntil(1) ----> [1-1]
1-3 . prevUntil(1) ------> [1-2, 1-1] 注意 查找的顺序 , 此时 1-2 是第一个.
1-5. prevUntil(1) -------> [1-4, 1-3, 1-2, 1-1] 注意: 1-4 是第一个, 因为 从底部 向上查找.
2-1 . prevUntil(2) -----> 返回的是空的 : lenth 是 0
2-2 .prevUntil(2) ------> [2-1]
点击li ,父辈出现; 子级,子辈不出现. prevUntil ---> 前面多个, 截止到 截止元素 , prev([expr]) --> 前面一个.的更多相关文章
- 在eclipse中建立子级源码文件夹
在eclipse中建立子级源码文件夹 右键点击项目 ---->new ---->source folder--->输入 src/main --->勾选update exclu ...
- WPF利用VisualTreeHelper遍历寻找对象的子级对象或者父级对象
原文:WPF利用VisualTreeHelper遍历寻找对象的子级对象或者父级对象 简介 本文将完整叙述我利用VisualTreeHelper实现题述功能的全部过程,想直接看函数实现的朋友可以跳到函数 ...
- vue结合Ant Design实现后台系统的权限分配(支持无限子级嵌套)
最近公司的业务需要,要做一个后台管理系统的管理系统类似于这样子 功能需求如下: 左边是权限菜单,右边对应的是具体权限. 1.父级权限菜单选中,父级权限菜单的权限包括其中所有子级权限菜单的权限也要选中, ...
- jquery获取父,同,子级元素
一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div"><a id="href_fir& ...
- 让一个父级div根据子级div高度而自适应高度
需求是点击上传的时候进行子级div高度不定,相对来说父级div高度也不能固定,把元素都设置成普通标准流,然后样式可以使用margin内边距或者padding外边距来进行调节 放上代码供参考: .opu ...
- C#中怎样在ToolStripMenuItem下再添加子级菜单
场景 在右键菜单ContextMenuStrip下添加子菜单选项可以通过 ContextMenuStrip menuStrip ToolStripMenuItem mnuChartOption = n ...
- Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)
Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...
- [Unity3D]巧妙利用父级子级实现Camera场景平面漫游
本文系作者原创,转载请注明出处 入门级的笔者想了一上午才搞懂那个欧拉角的Camera旋转..=.= 在调试场景的时候,每次都本能的按下W想前进,但是这是不可能的(呵呵) 于是便心血来潮想顺便添加个Ke ...
- 子级与父级的margin合并的问题
子级加上了margin以后,发现其父级也移动了相应的margin值.外边距合并.换成padding;在父级上加overflow:hidden;
随机推荐
- java控制流
目录 1.引用数据类型 2.流程控制语句 2.1 条件控制语句if 2.2 if语句与三元运算符的互换 2.3 循环语句 2.4 循环嵌套 2.5 跳转语句 2.6 选择结构switch 3.猜数字案 ...
- 【洛谷 P1216】【IOI1994】【USACO1.5】数字三角形 Number Triangles
(如此多的标签qaq) 数字三角形 Number Triangles[传送门] 本来打算当DP练的,没想到写着写着成递推了(汗) 好的没有时间了,我们附个ac代码(改天不写): #include< ...
- pygame
pip install msgpack-python pip install msgpack 离线安装下载地址 Downloading https://files.pythonhosted.org/p ...
- MVC实战之排球计分(四)—— View设计与实现
(view)视图 视图是用户看到并与之交互的界面.对老式的Web应用程序来说,视图就是由HTML元素组成的界面,在新式的Web应用程序中,HTML依旧在视图中扮演着重要的角色,但一些新的技术已层出不穷 ...
- 在react+redux+axios项目中使用async/await
Async/Await Async/Await是尚未正式公布的ES7标准新特性.简而言之,就是让你以同步方法的思维编写异步代码.对于前端,异步任务代码的编写经历了 callback 到现在流行的 Pr ...
- 可以进行SHA-1,SHA-224,SHA-256,SHA-384,SHA-512五种算法签名的工具类,以及简单说明
import java.security.MessageDigest; public class SignatureSHA { public static String signSHA(String ...
- python-django缓存
三 Django的缓存机制 1.1 缓存介绍 1.缓存的简介 在动态网站中,用户所有的请求,服务器都会去数据库中进行相应的增,删,查,改,渲染模板,执行业务逻辑,最后生成用户看到的页面. 当一个网站的 ...
- awr相关
手工生成awr快照SQL> exec dbms_workload_repository.create_snapshot; PL/SQL procedure successfully comple ...
- 【转】vue+axios 前端实现登录拦截(路由拦截、http拦截)
一.路由拦截 登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录 ...
- nginx支持HTTP2的配置过程
一.获取安装包 http://zlib.net/zlib-1.2.11.tar.gz https://www.openssl.org/source/openssl-1.0.2e.tar.gz (ope ...