后台常用的收缩菜单效果

 
 

  
  



  
  function

  
   StringBuffer() {   

    

  
  this

  
  .strings 

  
  =

  
   

  
  new

  
   Array;   

}   

  

StringBuffer.prototype.append 

  
  =

  
   

  
  function

  
   (str) {   

    

  
  this

  
  .strings.push(str);   

}   

  

StringBuffer.prototype.toString 

  
  =

  
   

  
  function

  
  () {   

    

  
  return

  
   

  
  this

  
  .strings.join(

  
  ""

  
  );   

}





  
  function

  
   getMenu()

{

    

  
  var

  
   oBuffer 

  
  =

  
   

  
  new

  
   StringBuffer();

    oBuffer.append(

  
  "

  
  <dl id='leftMenu1'>

  
  "

  
  );

    oBuffer.append(

  
  "

  
      <dt id='leftMenu10'>菜单1</dt>

  
  "

  
  );

    oBuffer.append(

  
  "

  
      <dd id='leftMenu11'><a href='myzone-xgxx.html'>菜单1-1</a></dd>

  
  "

  
  );

    oBuffer.append(

  
  "

  
      <dd id='leftMenu12'><a href='myzone-ztzh.html'>菜单1-2</a></dd>

  
  "

  
  );

    oBuffer.append(

  
  "

  
      <dd id='leftMenu13'><a href='/dev/space/dev/forbidden.jsp'>菜单1-3</a></dd>

  
  "

  
  );

    oBuffer.append(

  
  "

  
      <dd id='leftMenu14'><a href='/dev/space/dev/activation.jsp'>菜单1-4</a></dd>

  
  "

  
  );

    oBuffer.append(

  
  "

  
      <dd id='leftMenu15'><a href='/dev/space/dev/updatePwd.jsp'>菜单1-5</a></dd>

  
  "

  
  );    

    oBuffer.append(

  
  "

  
      <dd id='leftMenu16'><a href='/space.do?method=findBalancePage'>菜单1-6</a></dd>

  
  "

  
  );

    oBuffer.append(

  
  "

  
  </dl>

  
  "

  
  );

    oBuffer.append(

  
  "

  
  <dl id='leftMenu2'>

  
  "

  
  );

    oBuffer.append(

  
  "

  
      <dt id='leftMenu20'>菜单2</dt>

  
  "

  
  );

    oBuffer.append(

  
  "

  
      <dd id='leftMenu21'><a href='myzone-dgEAP.html'>菜单2-1</a></dd>

  
  "

  
  );

    oBuffer.append(

  
  "

  
      <dd id='leftMenu22'><a href='/ability.do?method=listDevEAP'>菜单2-2</a></dd>

  
  "

  
  );

    oBuffer.append(

  
  "

  
  </dl>

  
  "

  
  );

    oBuffer.append(

  
  "

  
  <dl id='leftMenu3'>

  
  "

  
  );

    oBuffer.append(

  
  "

  
      <dt id='leftMenu30'>菜单3</dt>

  
  "

  
  );

    oBuffer.append(

  
  "

  
      <dd id='leftMenu31'><a href='../../../app/usercenter/resource/newResource.html'>菜单3-1</a></dd>

  
  "

  
  );

    oBuffer.append(

  
  "

  
      <dd id='leftMenu32'><a href='../../../app/usercenter/resource/myResources.html'>菜单3-2</a></dd>

  
  "

  
  );

    oBuffer.append(

  
  "

  
      <dd id='leftMenu33'><a href='../../../app/usercenter/resource/myResources.html'>菜单3-3</a></dd>

  
  "

  
  );

    oBuffer.append(

  
  "

  
  </dl>

  
  "

  
  );

    oBuffer.append(

  
  "

  
  <dl id='leftMenu4'>

  
  "

  
  );

    oBuffer.append(

  
  "

  
      <dt id='leftMenu40'>菜单4</dt>

  
  "

  
  );

    oBuffer.append(

  
  "

  
      <dd id='leftMenu41'><a href='../../../app/usercenter/resource/newResource.html'>菜单4-1</a></dd>

  
  "

  
  );

    oBuffer.append(

  
  "

  
      <dd id='leftMenu42'><a href='../../../app/usercenter/resource/myResources.html'>菜单4-2</a></dd>

  
  "

  
  );

    oBuffer.append(

  
  "

  
  </dl>

  
  "

  
  );

    

  
  return

  
   oBuffer.toString();

}





$(document).ready(

  
  function

  
  () {

    

  
  var

  
   menuId 

  
  =

  
   

  
  "

  
  #leftMenu

  
  "

  
  ;

    $(menuId)[

  
  0

  
  ].innerHTML

  
  =

  
  getMenu();



    

  
  //

  
  所有二级菜单隐藏

  
  



  
      $(menuId).find(

  
  "

  
  dd

  
  "

  
  ).hide();

    $(menuId).find(

  
  "

  
  dl:first

  
  "

  
  ).find(

  
  "

  
  dd

  
  "

  
  ).show();

     $(menuId).find(

  
  "

  
  dl:first

  
  "

  
  ).find(

  
  "

  
  dt

  
  "

  
  ).addClass(

  
  "

  
  selected

  
  "

  
  );



    $(menuId).find(

  
  "

  
  dt

  
  "

  
  ).hover(

  
  function

  
  (){ $(

  
  this

  
  ).addClass(

  
  "

  
  hover

  
  "

  
  )}, 

  
  function

  
  (){$(

  
  this

  
  ).removeClass(

  
  "

  
  hover

  
  "

  
  ) })

    .click(

  
  function

  
  (){

            

        

  
  if

  
  ($(

  
  this

  
  ).parent().find(

  
  "

  
  dd

  
  "

  
  ).get(

  
  0

  
  ).style.display 

  
  ==

  
   

  
  "

  
  block

  
  "

  
  ){

                $(

  
  this

  
  ).parent().find(

  
  "

  
  dd

  
  "

  
  ).hide();

                $(

  
  this

  
  ).removeClass(

  
  "

  
  selected

  
  "

  
  );

            } 

  
  else

  
   {

                $(

  
  "

  
  dt

  
  "

  
  ).removeClass(

  
  "

  
  selected

  
  "

  
  )

                $(

  
  "

  
  dd

  
  "

  
  ).hide();

                $(

  
  this

  
  ).addClass(

  
  "

  
  selected

  
  "

  
  );

                $(

  
  this

  
  ).parent().find(

  
  "

  
  dd

  
  "

  
  ).show(); 

            }

            

    })

    $(menuId).find(

  
  "

  
  a

  
  "

  
  ).focus(

  
  function

  
  (){$(

  
  this

  
  ).get(

  
  0

  
  ).blur()})

    

  
  //

  
  二级菜单点击样式

  
  



  
      $(menuId).find(

  
  "

  
  dd

  
  "

  
  ).click(

  
  function

  
  (){ $(

  
  "

  
  dd

  
  "

  
  ).removeClass(

  
  "

  
  focus

  
  "

  
  );$(

  
  this

  
  ).addClass(

  
  "

  
  focus

  
  "

  
  ) });



})







  
  function

  
   selectMenu(menuid,subtitleid,submenuid) 

{ 

    

  
  var

  
   menuId 

  
  =

  
   

  
  "

  
  #leftMenu

  
  "

  
  ;

    $(menuId).find(

  
  "

  
  dd

  
  "

  
  ).hide();

    $(menuId).find(

  
  "

  
  dt

  
  "

  
  ).removeClass(

  
  "

  
  selected

  
  "

  
  );





    

  
  var

  
   menuObj 

  
  =

  
   document.getElementById(menuid);

    

  
  var

  
   ddObj 

  
  =

  
   menuObj.getElementsByTagName(

  
  "

  
  dd

  
  "

  
  );



    ddObj[

  
  0

  
  ].style.display 

  
  =

  
  "

  
  block

  
  "

  
  ;

    

  
  for

  
  (i

  
  =

  
  0

  
  ;i

  
  <

  
  ddObj.length;i

  
  ++

  
  )

    {

        ddObj[i].style.display 

  
  =

  
   

  
  ""

  
  ;                

    }



    document.getElementById(subtitleid).className

  
  =

  
  "

  
  selected

  
  "

  
  ;

    document.getElementById(submenuid).className 

  
  =

  
  "

  
  focus

  
  "

  
  ;

    

}







 
 

以上是调用的js外部代码，在html页面里只需加入下面一行代码就行了


<script type="text/javascript"> 
$(document).ready(function() 
{
$("#space").addClass("on");

// 初始化菜单选择项 begin
selectMenu('leftMenu1','leftMenu10','leftMenu11');
// 初始化菜单选择项 end
});
</script>


其中selectMenu('leftMenu1','leftMenu10','leftMenu11');是随着你页面而改变的，你当前的页面是上面写的菜单3下面的菜单3-1，那这段代码就应用是
selectMenu('leftMenu3','leftMenu30','leftMenu31');