首页 >> 网页技术 > 编程技术 >> 详细内容
编程技术 >> 正文
三级收缩菜单如何实现
日期:2019/10/13 

需求见下图,要求点击菜单展开子菜单, 但是其他同级展开的菜单要折叠。

menu.png

想了下,其实收缩展开菜单还是很简单的,用obj.style.display来控制就可以了。我以前是通过设置display的属性为none和 (空)来实现。

这次遇到的情况是,用li和ul布的局。所以发现display=""不好用了,换成display="block"。

if(obj.style.display=='none'){

   obj.style.display='block';

}else{

   obj.style.display='none';

}

上述代码就实现了菜单的展开和折叠。

现在要实现展开后,同级其他展开的菜单要收缩。这个时候需要引入中间变量,记住当前展开的是哪个菜单,然后点击后,与当前菜单进行比较,如果想等,直接收缩就可以了。如果不同,则先将原来的菜单收缩,在展开本次点击的菜单,再将中间变量设置为当前菜单。

原理就是这样,要实现起来,还得经过不断调试才行。编程就是不断调试然后达到目的的过程,这个过程是很享受的。

代码如下:

 

<script type="text/javascript" >
var erji=0;
var sanji=0;
function opmenu(menutype,menuid){
 if(menutype=="erji"){
  if(document.getElementById(menutype+menuid).style.display=="none"){
   document.getElementById(menutype+menuid).style.display="block";
   if(erji==0){
    erji=menuid;
   }else{
    document.getElementById(menutype+erji).style.display="none";
    if(erji==menuid){
     erji=0;
     document.getElementById(menutype+menuid).style.display="block";
    }else{
    erji=menuid;
    }
   }
  }else{
   document.getElementById(menutype+menuid).style.display="none";
  } 
  document.getElementById("show").innerText="erji:"+erji;
 }else{
  if(document.getElementById(menutype+menuid).style.display=="none"){
   document.getElementById(menutype+menuid).style.display="block";
   if(sanji==0){
    sanji=menuid;
   }else{
    document.getElementById(menutype+sanji).style.display="none";
    if(sanji==menuid){
     sanji=0;
     document.getElementById(menutype+menuid).style.display="block";
    }else{
    sanji=menuid;
    }
   }
  }else{
   document.getElementById(menutype+menuid).style.display="none";
  }
  document.getElementById("show1").innerText="sanji:"+sanji;
 }
}

</script>
<li><a href="javascript:opmenu('erji',1);">一级菜单</a>
 <ul id="erji1" style="display:none;">
     <li><a href="javascript:opmenu('sanji',1);">二级菜单</a>
         <ul id="sanji1" style="display:none;">
             <li>三级菜单</li>
                <li>三级菜单</li>
                <li>三级菜单</li>
            </ul>
        </li>
        <li><a href="javascript:opmenu('sanji',2);">二级菜单</a>
         <ul id="sanji2" style="display:none;">
             <li>三级菜单</li>
                <li>三级菜单</li>
                <li>三级菜单</li>
            </ul>
        </li>
        <li><a href="javascript:opmenu('sanji',3);">二级菜单</a>
         <ul id="sanji3" style="display:none;">
             <li>三级菜单</li>
                <li>三级菜单</li>
                <li>三级菜单</li>
            </ul>
        </li>
    </ul>
</li>
<li><a href="javascript:opmenu('erji',2);">一级菜单</a>
 <ul id="erji2" style="display:none;">
     <li><a href="javascript:opmenu('sanji',4);">二级菜单</a>
         <ul id="sanji4" style="display:none;">
             <li>三级菜单</li>
                <li>三级菜单</li>
                <li>三级菜单</li>
            </ul>
        </li>
        <li><a href="javascript:opmenu('sanji',5);">二级菜单</a>
         <ul id="sanji5" style="display:none;">
             <li>三级菜单</li>
                <li>三级菜单</li>
                <li>三级菜单</li>
            </ul>
        </li>
        <li><a href="javascript:opmenu('sanji',6);">二级菜单</a>
         <ul id="sanji6" style="display:none;">
             <li>三级菜单</li>
                <li>三级菜单</li>
                <li>三级菜单</li>
            </ul>
        </li>
    </ul>
</li><li><a href="javascript:opmenu('erji',3);">一级菜单</a>
 <ul id="erji3" style="display:none;">
     <li><a href="javascript:opmenu('sanji',7);">二级菜单</a>
         <ul id="sanji7" style="display:none;">
             <li>三级菜单</li>
                <li>三级菜单</li>
                <li>三级菜单</li>
            </ul>
        </li>
        <li><a href="javascript:opmenu('sanji',8);">二级菜单</a>
         <ul id="sanji8" style="display:none;">
             <li>三级菜单</li>
                <li>三级菜单</li>
                <li>三级菜单</li>
            </ul>
        </li>
        <li><a href="javascript:opmenu('sanji',9);">二级菜单</a>
         <ul id="sanji9" style="display:none;">
             <li>三级菜单</li>
                <li>三级菜单</li>
                <li>三级菜单</li>
            </ul>
        </li>
    </ul>
</li>
<div id="show">0</div>
<div id="show1">0</div>


最后两个div是用来调试js的