目录

上一节已经添加好了菜单特效，这一节，我们来添加面板的折叠和展开功能，效果图如下：

思路：我在Right视图中添加了一个div，在这个div中存放一张图片，通过对这张图片的点击，来控制Left视图的隐藏和显示。说白了，这里其实就是修改主框架Index视图中frameset的 cols属性。

开始操作

1、修改Right视图，在右侧添加一个div，设置float:left;，里面存放一个图片按钮，作为面板折叠和展开的开关。添加一个juqery方法，调用父框架Index视图中的方法hideShowFrame，修改Index视图中frameset的 cols属性，从而控制界面的展示。

@{    Layout = null;}        
         
                         
     
        
      
    
     
    
     
              hello，world    
     

2、修改Index视图，添加如下js：

//折叠展开面板        function hideShowFrame() {            if (document.getElementById("middenFram").cols == "193,*") {                document.getElementById("middenFram").cols = "0,*";            }            else {                document.getElementById("middenFram").cols = "193,*"            }        }

我们看下Index视图的主体部分：

@*顶部发104px，底部30px，中间部分自适应*@    @*左侧193px，右侧自适应*@            

3、F5运行，看效果。

框架中用到的js和css：