php 拉伸菜单,JavaScript_PHP+JS无限级可伸缩菜单详解（简单易懂），发了几天基础的东西，今天来

PHP+JS无限级可伸缩菜单详解(简单易懂)

发了几天基础的东西，今天来点稍微难的，一般在CMS系统后台中都要用到的类别管理部分的精华－－无限级分类菜单，对于新手来说，这个可能有一定难度，但是今天听完我细细道来，相信以后大家就都会弄这东东了。怎么实现呢？大家先做个数据库出来先：

-- 表的结构 `cr_columninfo`

复制代码代码如下:

CREATE TABLE `cr_columninfo` (

`columnid` int(4) NOT NULL auto_increment,

`columnfatherid` int(4) NOT NULL default '0',

`columnname` varchar(100) NOT NULL default '',

`columnadder` varchar(50) NOT NULL default '',

`columninputdate` date NOT NULL default '0000-00-00',

PRIMARY KEY (`columnid`)

) ENGINE=MyISAM AUTO_INCREMENT=15 DEFAULT CHARSET=utf8 AUTO_INCREMENT=15 ;

-- 导出表中的数据 `cr_columninfo`

INSERT INTO `cr_columninfo` (`columnid`, `columnfatherid`, `columnname`, `columnadder`, `columninputdate`) VALUES (1, 0, '影音明星', 'leehui', '2006-09-28'),

(2, 0, '校园风情', 'leehui1983', '2006-09-28'),

(3, 1, '港台明星', 'leehui', '2006-09-28'),

(4, 0, '风景图片', 'leehui1983', '2006-09-29'),

(5, 4, '浩瀚大海', 'leehui1983', '2006-09-29'),

(6, 5, '福州的海', 'leehui1983', '2006-09-29'),

(7, 2, '毕业图片', 'leehui', '2006-09-29'),

(9, 0, '体育明星', 'leehui1983', '2006-10-02'),

(10, 0, '精美壁纸', 'leehui1983', '2006-10-02'),

(11, 0, '城市风光', 'leehui1983', '2006-10-02'),

(12, 0, '卡通动漫', 'leehui1983', '2006-10-02'),

(13, 0, '游戏截图', 'leehui1983', '2006-10-02'),

(14, 0, '作者相册', 'leehui1983', '2006-10-02');

这些是测试数据，基本原理就是按照树型结构建立数据字段，核心就是栏目都有本身的ID号和父栏目的ID号，依靠这两个关系，建立树型结构，顶级栏目父ID＝0，这个都好理解，现在来叙述下程序执行原理，本程序采用最为普遍的递归算法来遍历子菜单，首先，先查询出所有顶级菜单，显示在一个大表格里，没一行显示一个顶级菜单，再通过递归列出所有子菜单，子菜单处在上级菜单的所在行的下一行，且行的显示属性为不显示，通过程序动态生成的行ID号，结合JS控制行的显示与隐藏，也就是类似于微软菜单的可伸缩效果，文章最后有张图有助于大家理解，这是把生成页面的HTML复制进DW来只管演示程序的最终结果。

来看代码部分，并没有难懂的语法，请大家借助注释自己阅读，有兴趣可扩展此代码。

PHP代码如下:

复制代码代码如下:

类别目录树

function ShowMenu(MenuID)

{

if(MenuID.style.display=="none"){

MenuID.style.display="";

}

else{

MenuID.style.display="none";

}