级联菜单

级联菜单

效果图

 

  1 <style>
  2     li{
  3         cursor: pointer;     //鼠标是小手
  4     }
  5     .jiu{
  6         display:none;
  7     }
  8 </style>
  9 <body>
 10     <ul>
 11         <li>蜀国
 12             <ul class="jiu">
 13                 <li>主公
 14                     <ul class="jiu">
 15                         <li>刘备</li>
 16                         <li>刘禅</li>
 17                     </ul>
 18                 </li>
 19                 <li>五虎上将
 20                     <ul class="jiu">
 21                         <li>关羽</li>
 22                         <li>张飞</li>
 23                         <li>赵云</li>
 24                         <li>黄忠</li>
 25                         <li>马超</li>
 26                     </ul>
 27                 </li>
 28                 <li>谋士
 29                     <ul class="jiu">
 30                         <li>卧龙</li>
 31                         <li>凤雏</li>
 32                     </ul>
 33                 </li>
 34             </ul>
 35         </li>
 36         <li>魏国
 37             <ul class="jiu">
 38                 <li>主公
 39                     <ul class="jiu">
 40                         <li>曹操</li>
 41                         <li>曹丕</li>
 42                     </ul>
 43                 </li>
 44                 <li>武将
 45                     <ul class="jiu">
 46                         <li>典韦</li>
 47                         <li>夏侯惇</li>
 48                         <li>许褚</li>
 49                     </ul>
 50                 </li>
 51                 <li>文臣
 52                     <ul class="jiu">
 53                         <li>杨修</li>
 54                         <li>许攸</li>
 55                         <li>司马懿</li>
 56                     </ul>
 57                 </li>
 58             </ul>
 59         </li>
 60         <li>吴国
 61             <ul class="jiu">
 62                 <li>主公
 63                     <ul class="jiu">
 64                         <li>孙策</li>
 65                         <li>孙权</li>
 66                     </ul>
 67                 </li>
 68                 <li>武将
 69                     <ul class="jiu">
 70                         <li>周瑜</li>
 71                         <li>吕蒙</li>
 72                     </ul>
 73                 </li>
 74                 <li>文臣
 75                     <ul class="jiu">
 76                         <li>诸葛瑾</li>
 77                         <li>张昭</li>
 78                         <li>鲁肃</li>
 79                     </ul>
 80                 </li>
 81             </ul>
 82         </li>
 83         <li>中原</li>
 84         <li>大漠</li>
 85     </ul>
 86 </body>
 87 </html>
 88 <script>
 89     // 1.给所有的li添加点击事件
 90     // 2.判断li内部是否有子元素ul
 91     // 3.如果有ul,隐藏就变显示,显示就变隐藏
 92     
 93     // 原生
 94     var list = document.getElementsByTagName("li");
 95     for(var i = 0; i < list.length; i++){
 96         list[i].onclick = function(e){
 97             var e = e || event;
 98             e.stopPropagation ?  e.stopPropagation() : e.cancelBubble = true;  //阻止冒泡
 99             if(this.lastElementChild){     //有下级菜单
100                 // 获取不到最后一个元素的话,返回null,null没有style属性会报错,所以要判断有没有最后一个元素
101                 if(this.lastElementChild.style.display == "block"){
102                     this.lastElementChild.style.display = "none";
103                 }else{
104                     this.lastElementChild.style.display = "block";
105                 }
106                 
107             }
108         }
109     }
110 </script>

js里判断是否有下级菜单的下一个判断(判断style的属性值),判断不一样儿( == "block"  /  =="none")会导致第一次点击不生效。第二次及以后的点击正常反应。

posted @ 2019-11-19 15:44  野鹤亦闲云  阅读(454)  评论(0编辑  收藏  举报