jquery实现折叠菜单功用【推荐】

一、首先定义一个JavaScript function,如下:

Infiniti级折叠菜单 1.01 JS版

那是一个大概的折叠框效果落到实处,大旨内容jQ库里的slideToggle()方法

function puckerMenu(level) {
var levelLength = ('row' + level).length;
var toDo = '0';
for (var iCount = 0 ; iCount < document.all.length; iCount++){
if ( document.all[iCount].id.indexOf('row' + level) > -1 && ( document.all[iCount].id.length > levelLength)) {
if ( document.all('level' + level).src.indexOf('minus.gif') > -1 ) {
document.all[iCount].style.display = 'none';
toDo = '1';
} else {
document.all[iCount].style.display = 'block';
toDo = '0';
}
}
 }
if ( toDo == '1' ) {
document.all('level' + level).src = 'images/plus.gif';
 } else {
document.all('level' + level).src = 'images/minus.gif';
 }
}

Infiniti级折叠菜单 1.0.1 JS版

  • 菜单_1_1;)
    • 菜单_2_1;)
      • 菜单_3_1;)
        • 菜单_4_1;)
          • 菜单_5_1;)
          • 菜单_5_2;)
        • 菜单_4_2;)
          • 菜单_5_1;)
          • 菜单_5_2;)
      • 菜单_3_2;)
        • 菜单_4_1;)
          • 菜单_5_1;)
          • 菜单_5_2;)
        • 菜单_4_2;)
          • 菜单_5_1;)
          • 菜单_5_2;)
    • 菜单_2_2;)
      • 菜单_3_1;)
        • 菜单_4_1;)
          • 菜单_5_1;)
          • 菜单_5_2;)
        • 菜单_4_2;)
          • 菜单_5_1;)
          • 菜单_5_2;)
      • 菜单_3_2;)
        • 菜单_4_1;)
          • 菜单_5_1;)
          • 菜单_5_2;)
        • 菜单_4_2;)
          • 菜单_5_1;)
          • 菜单_5_2;)
  • 菜单_1_2;)
    • 菜单_2_1;)
      • 菜单_3_1;)
        • 菜单_4_1;)
          • 菜单_5_1;)
          • 菜单_5_2;)
        • 菜单_4_2;)
          • 菜单_5_1;)
          • 菜单_5_2;)
      • 菜单_3_2;)
        • 菜单_4_1;)
          • 菜单_5_1;)
          • 菜单_5_2;)
        • 菜单_4_2;)
          • 菜单_5_1;)
          • 菜单_5_2;)
    • 菜单_2_2;)
      • 菜单_3_1;)
        • 菜单_4_1;)
          • 菜单_5_1;)
          • 菜单_5_2;)
        • 菜单_4_2;)
          • 菜单_5_1;)
          • 菜单_5_2;)
      • 菜单_3_2;)
        • 菜单_4_1;)
          • 菜单_5_1;)
          • 菜单_5_2;)
        • 菜单_4_2;)
          • 菜单_5_1;)
          • 菜单_5_2;)

[Ctrl+A 全选
注:如需引进外界Js需刷新技能试行]

在线演示

效果图如下:

二、然后在网页上定义一个div和一个ul,注意div中要包含四个idlevel开头的image和一个onclick事件,ulid要包含row,暗中同意意况下是展开的,借使须求默感觉关闭,则要在ul中加入style="display:none"

你也许感兴趣的稿子:

  • js完成选项卡内容切换以及折叠和开始展览效果【推荐】
  • Javascript落到实处代码折叠功用
  • JSONInfiniti折叠菜单编写实例
  • js
    全包容可高亮二级缓冲折叠菜单
  • 原生Js与jquery的多组管理,
    仅张开三个区块的折叠成效
  • js完毕轻便折叠、展开菜单的秘籍
  • javascript仿qq界面包车型大巴折叠菜单实现代码
  • Js操作树节点自动折叠张开的两种方式
  • JS+CSS完成的简易折叠张开多级菜单作用
  • jquery完毕折叠菜单功用【推荐】

图片 1图片 2

事比如下:

css代码:

发表评论

电子邮件地址不会被公开。 必填项已用*标注