Js实现原生二级菜单

  1. html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>二级菜单title>
  8.     <style>
  9.         span{
  10.             background-color: pink;
  11.         }
  12.         #menu{
  13.             background-color: orange;
  14.             width: 90px;
  15.             font-size: 30px;
  16.             text-align: center;
  17.             cursor: pointer;
  18.             margin: auto;
  19.             margin-top: 100px;
  20.         }
  21.         .fold{
  22.             height: 30px;
  23.             overflow: hidden;
  24.         }
  25.         a{
  26.             font-size: 20px;
  27.         }
  28.     style>
  29.    
  30. head>
  31. <body>
  32.     <div id="menu">
  33.         <div class="fold"><span>羊村span>
  34.             <br>
  35.             <a href="#">喜羊羊a><br>
  36.             <a href="#">美羊羊a><br>
  37.             <a href="#">懒羊羊a><br>
  38.             <a href="#">懒羊羊a><br>
  39.         div>
  40.         <div class="fold"><span>羊村span>
  41.             <br>
  42.             <a href="#">喜羊羊a><br>
  43.             <a href="#">美羊羊a><br>
  44.             <a href="#">懒羊羊a><br>
  45.             <a href="#">美羊羊a><br>
  46.             <a href="#">懒羊羊a><br>
  47.         div>
  48.         <div class="fold"><span>羊村span>
  49.             <br>
  50.             <a href="#">喜羊羊a><br>
  51.             <a href="#">美羊羊a><br>
  52.             <a href="#">懒羊羊a><br>
  53.             <a href="#">喜羊羊a><br>
  54.             <a href="#">美羊羊a><br>
  55.             <a href="#">懒羊羊a><br>
  56.         div>
  57.     div>
  58. body>
  59. <script src="./tools.js">script>
  60. <script>
  61. var spans = document.getElementsByTagName('span'); //获取span标签
  62. var opendiv = spans[0].parentNode;
  63. removeClass(opendiv,'fold');
  64.  
  65.  for(var i = 0; i < spans.length; i++){
  66.     spans[i].onclick = function(){
  67.         var clickdiv = this.parentNode;
  68.        // alert(clickdiv);
  69.         menutoggle(clickdiv);
  70.        // toggleClass(clickdiv,'fold');
  71.         if(opendiv!=clickdiv && !hasClass(opendiv,'fold')){
  72.             //addClass(opendiv,'fold');
  73.             //toggleClass(opendiv,'fold');
  74.             menutoggle(opendiv);
  75.         }
  76.         opendiv = clickdiv;
  77.  
  78.     }
  79. }
  80. /* 定义菜单切换以及动画效果 */ 
  81. function menutoggle(obj){
  82.     //在切换样式之前元素的高度
  83.     var begin = obj.offsetHeight;
  84.     //切换样式
  85.     toggleClass(obj,'fold');
  86.     //切换之后的高度
  87.     var end = obj.offsetHeight;
  88.     //将元素样式切换到变化前，来设置动画效果
  89.     obj.style.height = begin + 'px';
  90.     obj.style.overflow = 'hidden';
  91.     move(obj,'height',end,10,function(){
  92.         obj.style.height = ""; //内联样式取消，防止影响下次触发动画样式不变
  93.     });
  94.  
  95. }
  96.  
  97. script>
  98.  
  99. html>

 

注：本文转载自blog.csdn.net的JeFerone的文章"https://blog.csdn.net/xsgg1234/article/details/97521893"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！