作为程序员,写代码不是最头疼的东西,而是...看懂别人的代码,并且修改别人的代码,最后达到自己想要的效果。不幸的是恰巧小弟遇到的就是这样一个问题...自己捣鼓了好久,实在是无能无力,哎...所以,希望高手们伸出援助之手,小弟感激不尽。
资源我已经上传到了这里,大家可以去下载看看,免积分的。大家不用担心。资源网址是:http://download.csdn.net/detail/zhizhuochangeing/4666266解压后里面有个三个文件夹:分别是:js, server, style 文件夹。其中在server文件夹里头有个叫layout1的Html页面,双击进去,然后就可以看见页面了。注意这个页面,右上角有个收缩的按钮图标,点击它,然后它会收缩那个DIV,那个DIV貌似是动态加载的,不太清楚...哎...收缩那个DIV后,它就变成了大概是35PX的蓝色背景的DIV了,在页面左侧Title2的下方有个叫 content2 addmenu 的这样一段文本,点击addmenu这个超链接,点击后,它会在刚才那个收缩后的只有35PX左右的DIV里头显示这样一段文字:欢迎您,admin管理员注销退出。现在问题来了,我想达到的效果是:就是第一步点击那个收缩按钮的时候,在那个大Div收上去的时候,就显示这一段文本:欢迎您,admin管理员注销退出,而不是...还要去点击 addmenu这个超链接 的时候 才把这段文本显示出来。而是在第一次直接在点收缩按钮的时候就显示出来这段文本,也就是省略第二步那个点击超链接的动作。不知道大神们是否听明白了小弟的需求,小弟不才,只有这样的口才了,呵。 如果大神们对需求还是不太清楚的,欢迎提出来。大神们,不好意思哦,文本有点长,请大神们耐心看完,小弟感激不尽,占用了大家的时间了,只是很急,所以...才大神们,改出来后,麻烦加上注释,哪里改动的,这样方便小弟学习。谢谢了,各位。感激不尽,不够分还可以再加。

解决方案 »

  1.   

    自己想要什么效果,自己理清思路,自己写。没别要改别人的代码。
    感觉你说的东西很简单,
    一个按钮,一个div,点击按钮控制div 显示和关闭。就这意思吧?如果不要动画效果,直接设置 display 就OK。
    要动画效果,setTimeout 控制div 高度,(可以同时控制透明度)就ok
      

  2.   

    一个简单的效果
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <style type="text/css">
    html,body{width:100%;height:100%;background-image:url(about:blank);background-attachment:fixed;}
    ul,li{padding:0px;margin:0px;}
    li 
    {
        list-style: none outside none;float:left;display:inline; border:1px solid #ddd;text-align:center;overflow:hidden;
    }
    .divMainNV{width:800px;height:auto; overflow:hidden; margin:50px auto 0px;}
    .op_btnDiv
    {
    width:800px;height:16px;margin:0px auto; text-align: -moz-center !important;text-align: center;
    }
    .main_list{width:800px;height:120px;}
    .main_list li{width:158px;height:118px;line-height:118px;}
    .nv_list{width:800px;height:120px;overflow:hidden;}
    .nv_list li{width:78px;height:58px;line-height:58px;}.op_btn{
    background: url("http://img.t.sinajs.cn/t4/x5style/images/nav/nav_bg.png?id=1350375249297") no-repeat scroll center -60px #F2F2F2;
        border-color: #CECECE;
        border-radius: 0 0 3px 3px;
        border-style: solid;
        border-width: 0 1px 1px;
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 1px 0 rgba(255, 255, 255, 0.1) inset;
        display: block;
        height: 16px;
        width:60px;
        line-height: 200px;
        outline: medium none;
        overflow: hidden;
    }
    .close{
      background-position: center -60px;
    } .open {
      background-position: center -80px;
    }
    * html .fixed-top    {position:absolute;bottom:auto; top:expression(eval(document.documentElement.scrollTop));}
    * html .fixed-bottom {position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}.fixed-bottom  {
      position:fixed;
      left:0px;
      bottom:0px;
      background:aqua;
      width:100%;
      height:50px;
    }.fixed-top{
      position:fixed;
      top:0px;
      left:0px;
      background:blue;
      width:100%;
      height:50px;
    }
    </style></head>
    <body>
    <div class="fixed-top"></div>
    <div  class="divMainNV">
      <ul    class="main_list">
      <li><a href="/21/cot">美食</a></li>
       <li><a href="/21/cot">美食1</a></li>
        <li><a href="/21/cot">美食2</a></li>
         <li><a href="/21/cot">美食3</a></li>
          <li><a href="/21/cot">美食4</a></li>
        </ul>
      <ul class="nv_list"  id="nv_list">
      <li><a suda-uatrack="key=topnav&amp;value=class_1" href="/1/cot">美女</a></li>
      <li><a suda-uatrack="key=topnav&amp;value=class_2" href="/2/cot">帅哥</a></li>
      <li><a suda-uatrack="key=topnav&amp;value=class_4" href="/4/cot">体育</a></li>
      <li><a suda-uatrack="key=topnav&amp;value=class_6" href="/6/cot">游戏</a></li>
      <li><a suda-uatrack="key=topnav&amp;value=class_7" href="/7/cot">萌宠物</a></li>
      <li><a suda-uatrack="key=topnav&amp;value=class_8" href="/8/cot">动漫</a></li>
      <li><a suda-uatrack="key=topnav&amp;value=class_11" href="/11/cot">读书</a></li>
      <li><a suda-uatrack="key=topnav&amp;value=class_12" href="/12/cot">音乐</a></li>
      <li><a suda-uatrack="key=topnav&amp;value=class_16" href="/16/cot">军事</a></li>
      <li><a suda-uatrack="key=topnav&amp;value=class_17" href="/17/cot">历史</a></li>
      <li><a suda-uatrack="key=topnav&amp;value=class_19" href="/19/cot">美容发妆</a></li>
      <li ><a suda-uatrack="key=topnav&amp;value=class_20" href="/20/cot">母婴育儿</a></li>
      <li><a suda-uatrack="key=topnav&amp;value=class_22" href="/22/cot">健康</a></li>
      <li><a suda-uatrack="key=topnav&amp;value=class_25" href="/25/cot">家居</a></li>
      <li><a suda-uatrack="key=topnav&amp;value=class_26" href="/26/cot">摄影</a></li>
      <li><a suda-uatrack="key=topnav&amp;value=class_27" href="/27/cot">汽车</a></li>
      <li><a suda-uatrack="key=topnav&amp;value=class_28" href="/28/cot">艺术设计</a></li>
      <li><a suda-uatrack="key=topnav&amp;value=class_32" href="/32/cot">建筑</a></li>
      <li><a suda-uatrack="key=topnav&amp;value=class_33" href="/33/cot">婚嫁</a></li>
      <li><a suda-uatrack="key=topnav&amp;value=class_15" href="/15/cot">财经</a></li>
        </ul>
        <div class="clear:both;"></div>
      </div>
      <div class="op_btnDiv" ><a id="op_btn" class="op_btn close" href="javascript:;">打开</a></div>
      <div class="fixed-bottom"></div>
      </body>
      <script type="text/javascript" src="Accordion.js" charset='utf-8'></script>
    <script type="text/javascript">
      var accordion = new __AccordionClass();
       accordion.isMultiExpand = true; // 是否可已同时展开多个
       accordion.initAccordion( [document.getElementById('op_btn')], [document.getElementById('nv_list')],"op_btn close","op_btn open");
    accordion.expandFolded(0);
    </script>
    </html>
      

  3.   

    Accordion.js:/*
    功能:滑动门(手风琴)效果封装类
    作者:老胡
    日期:2010-06-29
    */
    function __AccordionClass()
    {
        this.isMultiExpand = false; // 是否允许多个同时展开
        this.expandClassName ='';  // 内容展开后的,头类名称
        this.foldedClassName ='';  // 内容折叠后的,头类名称
        this.speedTime = 5 ;       // 展开折叠速度 ,隔多少毫秒执行一次
        this.speedCount=10 ;       // 展开折叠渐变次数,多少次完成展开折叠
        this.defaultExpandIndex = 0; // 默认展开的索引
        var isIE = document.all?true:false;
        var accordion=[];            // 
        var obj = null;
        var accordionPan =function()
        {   
            this.isExpand = true;
            this.maxHeight=0;
            this.timer=null;
            this.header=null;
            this.content = null;
        };
        this.initAccordion = function(headerList,contentList,exClassName,fdClassName)
        {
            if(headerList&&contentList&&headerList!=null&&contentList!=null&&headerList.length>0&&headerList.length==contentList.length){
                  obj = this;
                  for(var i=0;i<headerList.length;i++)
                  {
                      accordion[i] = new  accordionPan();
                      accordion[i].maxHeight = contentList[i].offsetHeight;
                      accordion[i].header = headerList[i];
                      accordion[i].content = contentList[i];
                      accordion[i].content.style.overflow='hidden';
                      if(exClassName&&exClassName!=null&&exClassName!='')obj.expandClassName = exClassName;
                       if(fdClassName&&fdClassName!=null&&fdClassName!='')obj.foldedClassName = fdClassName;
                      obj.bindEvent(i);
                  }
                  if(!obj.isMultiExpand)
                  {
                       obj.expandFolded(obj.defaultExpandIndex);
                  }
            }
        };
        this.bindEvent = function(i)
        {
             if(window.addEventListener){
                   accordion[i].header.addEventListener('click', function(e){ obj.expandFolded(i);  },false); 
              }else{
                   accordion[i].header.attachEvent("onclick",function(){ obj.expandFolded(i);  });   
             }   
        };
        this.expandFolded = function(i)
        {    
                 if( accordion[i].isExpand)
                 {    
                     if(obj.isMultiExpand)
                     {
                        clearInterval(accordion[i].timer);
                      accordion[i].timer=setInterval(function(){obj.folded(i);},obj.speedTime);
                   }else{
                        for(var j=0;j<accordion.length;j++){
                         if(i!=j)obj.toFolded(j);
                        }
                   }
                 }
                 else
                 {  
                     clearInterval(accordion[i].timer);
                  accordion[i].content.style.display='';
             accordion[i].timer=setInterval(function(){obj.expand(i);},obj.speedTime);
             if(!obj.isMultiExpand)
                     {
                        for(var j=0;j<accordion.length;j++){
                           if(i!=j)obj.toFolded(j);
                        }
                     } 
                 }
        };
        this.toFolded = function(i){
             clearInterval(accordion[i].timer);
              accordion[i].timer=setInterval(function(){obj.folded(i);},obj.speedTime);
        };
        this.expand=function(i)
        {
            var h = accordion[i].content.offsetHeight;
           if(h<accordion[i].maxHeight)
           {
       var v = Math.round((accordion[i].maxHeight-h)/obj.speedCount);
        v = (v<1) ? 1 :v ;
        v+=h;
       accordion[i].content.style.height=( v)+'px';
       if(isIE){
            accordion[i].content.style.filter= 'alpha(opacity='+(v*100/accordion[i].maxHeight)+');';
       }else{
             accordion[i].content.style.opacity = (v/accordion[i].maxHeight);
       }
        }else{ 
            if(obj.expandClassName !='') accordion[i].header.className = obj.expandClassName ;
        accordion[i].content.style.height=accordion[i].maxHeight +'px';
        accordion[i].isExpand = true;
        clearInterval(accordion[i].timer);
        }
        };
        this.folded=function(i)
        {
           var h = accordion[i].content.offsetHeight;
           if(h> 0)
           {
       var v = Math.round(h/obj.speedCount);
       v = (v<1) ? 1 :v ;
       accordion[i].content.style.height=(h - v)+'px';
       v=(h - v)/accordion[i].maxHeight;
       if(isIE){
            accordion[i].content.style.filter= 'alpha(opacity='+(v*100)+');';
       }else{
             accordion[i].content.style.opacity = v;
       }
        }else{
             if(obj.foldedClassName !='') accordion[i].header.className = obj.foldedClassName ;
        accordion[i].content.style.height='0px';
        accordion[i].content.style.display='none';
        accordion[i].isExpand = false;
        clearInterval(accordion[i].timer);
        }
        }
    }
      

  4.   

    1:打开:/js/jquery.easyui.min.js文件
    2:找到第3475行的_2aa(_29f,dir);
    3:在它下面添加:addmenu();搞定