1 .html 结构:
1 <ul class="ul_2 hide" data-first="5"> 2 <li class="li_2" onclick="getSecond(this, 6)">5学习目标 3 <ul class="ul_3"> 4 <li class="li_3" onclick="getThird(this, 11, event)">1.视频展示视频展示视频展示视频展示</li> 5 <li class="li_3" onclick="getThird(this, 11, event)">2.学习评价</li> 6 <li class="li_3" onclick="getThird(this, 11, event)">3.小组评价</li> 7 </ul> 8 </li> 9 <li class="li_2" onclick="getSecond(this, 7)">课前学习</li> 10 <li class="li_2" onclick="getSecond(this, 8)">教学活动 11 <ul class="ul_3"> 12 <li class="li_3" onclick="getThird(this, 11, event)">1.视频展示</li> 13 <li class="li_3" onclick="getThird(this, 11, event)">2.学习评价</li> 14 <li class="li_3" onclick="getThird(this, 11, event)">3.小组评价</li> 15 <li class="li_3" onclick="getThird(this, 11, event)">4.小组评价</li> 16 </ul> 17 </li> 18 <li class="li_2" onclick="getSecond(this, 9)">课后练习</li> 19 <li class="li_2" onclick="getSecond(this, 10)">师生论坛 20 <ul class="ul_3"> 21 <li class="li_3" onclick="getThird(this, 11, event);">1.测试视频展示</li> 22 <li class="li_3" onclick="getThird(this, 11, event);">2.学习评价</li> 23 <li class="li_3" onclick="getThird(this, 11, event);">3.小组评价</li> 24 </ul> 25 </li> 26 </ul>
重要部分: getThird(this, 11, event)
其中传递event.
2. js
1 /** 2 * [getThird 1)获取三级导航的数据] 3 * @param {[type]} node [description] 4 * @param {[type]} thirdId [description] 5 * @return {[type]} [description] 6 */ 7 function getThird(node, thirdId, e) 8 { 9 // console.log(333); 10 // console.log(e); 11 //当前三级增加效果 + 去除同级 的三级效果: 12 $(node).addClass("selectThird").siblings(".li_3").removeClass("selectThird"); 13 14 //自己的父级(二级)增加效果 + 同级的二级及其子级去除效果: 15 $(node).parents(".li_2").addClass("selectSecond").siblings(".li_2").removeClass("selectSecond").find(".li_3").removeClass("selectThird"); 16 17 18 // getContent(thirdId, 3); 19 20 cancelBubble(e); 21 }
1 function cancelBubble(e) { 2 var evt = e ? e : window.event; 3 if (evt.stopPropagation) { //W3C 4 evt.stopPropagation(); 5 }else { //IE 6 evt.cancelBubble = true; 7 } 8 }