用Javascript实现菜单折叠效果

最新推荐文章于 2021-06-03 22:04:11 发布

icecoldheart

最新推荐文章于 2021-06-03 22:04:11 发布

阅读量1.3k

点赞数

文章标签： javascript menu stylesheet statistics 脚本 html

本文链接：https://blog.csdn.net/icecoldheart/article/details/3023249

版权

在网上看了好多用Javascript实现菜单折叠的例子都特别的麻烦，于是自己写了一个虽然效果不如网上的强但是也可以实现了相应的功能：
Javascript部分代码：

 
 function display(num)   
{ 
 if (menu_left[num].style.display=="none")  
  {  
      for(a=0;a<menu_left.length;a++){
        if (a==num){
        menu_left[a].style.display="inline";
        }
        else{
        menu_left[a].style.display="none";
        }
      }
  } 
  else { 
    menu_left[num].style.display="none"; 
  } 
} 
 

HTML代码：

 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="../../css.css">
        <script language="javascript" src="hide.js"></script>
         
    </head>
    <body>
        <div class="menu_left">
            <ul>
                
                <li>
                    <a href="javascript:display(0)">号码信息维护管理</a>
                    <div id ="menu_left" style="display:none">
                    <ul>
                        <li>
                            <a href="information_select.html" target="right">查询号码信息</a>
                        </li>
                        <li>
                            <a href="information_batchupdata.html" target="right">状态批量修改页面</a>
                        </li>
                        <li>
                            <a href="loginformation_select.html" target="right">日志查询页面</a>
                        </li>
                    </ul>
                    </div>
                </li>
                <li>
                    <a href="javascript:display(1)">号码回收</a>
                    <div id ="menu_left" style="display:none">
                    <ul>
                        <li>
                            <a href="recovery/numbers_list_recovery.html" target="right">待回收号码清单</a>
                        </li>
                        <li>
                            <a href="recovery/numbers_statistics_recovery.html" target="right">待回收号码详情统计</a>
                        </li>
                    </ul>
                    </div>
                </li>
                <li>
                    <a href="restart/options.html" target="right">回收号码启用</a>
                     
                </li>
            </ul>
         </div>
        <div class="right">
            <iframe class="rightIframe" src="information_select.html" name="right" frameborder="0" scrolling="no" width="100%" onload="this.height=0;var fdh=(this.Document?this.Document.body.scrollHeight:this.contentDocument.body.offsetHeight);this.height=(fdh>7?fdh:7)" allowtransparency="false">
            </iframe>
        </div>
    </body>
</html>
 

这样就实现了菜单的折叠效果了，是不是觉得很简单啊。
还有一点要注意在引入脚本的时候<script></script>要这样写全，要不然会出不来页面。

icecoldheart

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用Javascript实现菜单折叠效果

在网上看了好多用Javascript实现菜单折叠的例子都特别的麻烦，于是自己写了一个虽然效果不如网上的强但是也可以实现了相应的功能：Javascript部分代码：function display(num) { if (menu_left[num].style.display=="none") { for(a=0;a if
复制链接

扫一扫