要求:

　　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]