要求:

  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]) --> 前面一个.的更多相关文章

  1. 在eclipse中建立子级源码文件夹

    在eclipse中建立子级源码文件夹 右键点击项目 ---->new ---->source folder--->输入 src/main  --->勾选update exclu ...

  2. WPF利用VisualTreeHelper遍历寻找对象的子级对象或者父级对象

    原文:WPF利用VisualTreeHelper遍历寻找对象的子级对象或者父级对象 简介 本文将完整叙述我利用VisualTreeHelper实现题述功能的全部过程,想直接看函数实现的朋友可以跳到函数 ...

  3. vue结合Ant Design实现后台系统的权限分配(支持无限子级嵌套)

    最近公司的业务需要,要做一个后台管理系统的管理系统类似于这样子 功能需求如下: 左边是权限菜单,右边对应的是具体权限. 1.父级权限菜单选中,父级权限菜单的权限包括其中所有子级权限菜单的权限也要选中, ...

  4. jquery获取父,同,子级元素

    一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div"><a id="href_fir& ...

  5. 让一个父级div根据子级div高度而自适应高度

    需求是点击上传的时候进行子级div高度不定,相对来说父级div高度也不能固定,把元素都设置成普通标准流,然后样式可以使用margin内边距或者padding外边距来进行调节 放上代码供参考: .opu ...

  6. C#中怎样在ToolStripMenuItem下再添加子级菜单

    场景 在右键菜单ContextMenuStrip下添加子菜单选项可以通过 ContextMenuStrip menuStrip ToolStripMenuItem mnuChartOption = n ...

  7. Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)

    Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...

  8. [Unity3D]巧妙利用父级子级实现Camera场景平面漫游

    本文系作者原创,转载请注明出处 入门级的笔者想了一上午才搞懂那个欧拉角的Camera旋转..=.= 在调试场景的时候,每次都本能的按下W想前进,但是这是不可能的(呵呵) 于是便心血来潮想顺便添加个Ke ...

  9. 子级与父级的margin合并的问题

    子级加上了margin以后,发现其父级也移动了相应的margin值.外边距合并.换成padding;在父级上加overflow:hidden;

随机推荐

  1. java控制流

    目录 1.引用数据类型 2.流程控制语句 2.1 条件控制语句if 2.2 if语句与三元运算符的互换 2.3 循环语句 2.4 循环嵌套 2.5 跳转语句 2.6 选择结构switch 3.猜数字案 ...

  2. 【洛谷 P1216】【IOI1994】【USACO1.5】数字三角形 Number Triangles

    (如此多的标签qaq) 数字三角形 Number Triangles[传送门] 本来打算当DP练的,没想到写着写着成递推了(汗) 好的没有时间了,我们附个ac代码(改天不写): #include< ...

  3. pygame

    pip install msgpack-python pip install msgpack 离线安装下载地址 Downloading https://files.pythonhosted.org/p ...

  4. MVC实战之排球计分(四)—— View设计与实现

    (view)视图 视图是用户看到并与之交互的界面.对老式的Web应用程序来说,视图就是由HTML元素组成的界面,在新式的Web应用程序中,HTML依旧在视图中扮演着重要的角色,但一些新的技术已层出不穷 ...

  5. 在react+redux+axios项目中使用async/await

    Async/Await Async/Await是尚未正式公布的ES7标准新特性.简而言之,就是让你以同步方法的思维编写异步代码.对于前端,异步任务代码的编写经历了 callback 到现在流行的 Pr ...

  6. 可以进行SHA-1,SHA-224,SHA-256,SHA-384,SHA-512五种算法签名的工具类,以及简单说明

    import java.security.MessageDigest; public class SignatureSHA { public static String signSHA(String ...

  7. python-django缓存

    三 Django的缓存机制 1.1 缓存介绍 1.缓存的简介 在动态网站中,用户所有的请求,服务器都会去数据库中进行相应的增,删,查,改,渲染模板,执行业务逻辑,最后生成用户看到的页面. 当一个网站的 ...

  8. awr相关

    手工生成awr快照SQL> exec dbms_workload_repository.create_snapshot; PL/SQL procedure successfully comple ...

  9. 【转】vue+axios 前端实现登录拦截(路由拦截、http拦截)

    一.路由拦截 登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录 ...

  10. nginx支持HTTP2的配置过程

    一.获取安装包 http://zlib.net/zlib-1.2.11.tar.gz https://www.openssl.org/source/openssl-1.0.2e.tar.gz (ope ...