要求:
1. 点击第一级 [1知识点] 的时候, [1知识点] 前有 圆圈.
点击 第二级 [1-1知识点, 1-2知识点, 1-3知识点] 时 , [1知识点]出现 圆圈.
2. 点击 第一级[2知识点] 或者 第二级[2-1知识点, 2-2知识点]的时候, [2知识点] 出现圆圈, [1知识点] 前 圆圈 隐藏.
---------------------------------------------------------------------------
html:
1 <ul> 2 3 4 <li date-level="0" onclick="changeDetails(1, this)"> 5 6 <span class="circleChose hide">1</span> 7 8 9 <span class="rightListContent">1知识点</span> 10 </li> 11 12 13 <li date-level="1" onclick="changeDetails(2, this)"> 14 15 16 17 18 <span class="rightListContentSub">1-1知识点</span> 19 </li> 20 21 22 23 24 <li date-level="1" onclick="changeDetails(3, this)"> 25 26 27 28 29 <span class="rightListContentSub">1-2知识点</span> 30 </li> 31 32 33 34 35 <li date-level="1" onclick="changeDetails(4, this)"> 36 37 38 39 40 <span class="rightListContentSub">1-3知识点</span> 41 </li> 42 43 44 45 46 <li date-level="1" onclick="changeDetails(8, this)"> 47 48 49 50 51 <span class="rightListContentSub">1-4知识点</span> 52 </li> 53 54 55 56 57 58 59 <li date-level="0" onclick="changeDetails(5, this)"> 60 61 <span class="circleChose">2</span> 62 63 64 <span class="rightListContent">2知识点</span> 65 </li> 66 67 68 <li date-level="1" onclick="changeDetails(6, this)"> 69 70 71 72 73 <span class="rightListContentSub">2-1知识点</span> 74 </li> 75 76 77 78 79 <li date-level="1" onclick="changeDetails(7, this)"> 80 81 82 83 84 <span class="rightListContentSub">2-2知识点</span> 85 </li> 86 87 88 89 90 91 </ul>
JavaScript:
1 function changeDetails(knowledgeId, node) 2 { 3 // console.log($(node).attr('date-level')); 4 5 //判断点击的是一级 还是二级. 6 if ($(node).attr('date-level') == 0) { 7 //显示当前节点 8 if ($(node).find('.circleChose').hasClass('hide')) { 9 $(node).find('.circleChose').removeClass('hide'); 10 } 11 12 //隐藏其他节点: 13 $(node).siblings('li').each(function(index, el) { 14 if (!$(this).find('.circleChose').hasClass('hide')) { 15 $(this).find('.circleChose').addClass('hide'); 16 } 17 }); 18 } else { 19 //二级: 20 $(node).prevUntil("li[date-level = 0]"); 21 // console.log($(node).prevUntil("li[date-level = 0]")); 22 //找到直到 data-level = 0 为止的所有选项. 23 var tempList = $(node).prevUntil("li[date-level = 0]"); 24 25 if (tempList.length == 0) { 26 //当前是第一个子节点: 27 //显示当前节点 28 // console.log('222'); 29 if ($(node).prev().find('.circleChose').hasClass('hide')) { 30 $(node).prev().find('.circleChose').removeClass('hide'); 31 } 32 33 //隐藏其他节点: 34 $(node).prev().siblings('li').each(function(index, el) { 35 if (!$(this).find('.circleChose').hasClass('hide')) { 36 $(this).find('.circleChose').addClass('hide'); 37 } 38 }); 39 } else { 40 // tempList.last().prev() 41 //显示当前节点 42 // console.log('333'); 43 if (tempList.last().prev().find('.circleChose').hasClass('hide')) { 44 tempList.last().prev().find('.circleChose').removeClass('hide'); 45 } 46 47 //隐藏其他节点: 48 tempList.last().prev().siblings('li').each(function(index, el) { 49 if (!$(this).find('.circleChose').hasClass('hide')) { 50 $(this).find('.circleChose').addClass('hide'); 51 } 52 }); 53 54 } 55 } 56 57 58 getDetails(knowledgeId); 59 }
对于 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]