php伸缩菜单_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";

}

}

栏目树形结构列表

//基本变量设置

$GLOBALS["ID"] =1; //用来跟踪下拉菜单的ID号

$layer=1; //用来跟踪当前菜单的级数

//连接数据库

$Con=mysql_connect("localhost","root","7529639");

mysql_select_db("cr_download");

mysql_query("SET NAMES "GBK"");

//提取一级菜单

$sql="select * from cr_columninfo where columnfatherid=0";

$result=mysql_query($sql,$Con);

//如果一级菜单存在则开始菜单的显示

if(mysql_num_rows($result)>0) ShowTreeMenu($Con,$result,$ID);

//=============================================

//显示树型菜单函数 ShowTreeMenu($con,$result,$layer)

//$con：数据库连接

//$result：需要显示的菜单记录集

//$layer：需要显示的菜单的级数

//=============================================

function ShowTreeMenu($Con,$result,$layer)

{

//取得需要显示的菜单的项目数

$numrows=mysql_num_rows($result);

//开始显示菜单，每个子菜单都用一个表格来表示

echo "

for($rows=0;$rows

{

//将当前菜单项目的内容导入数组

$menu=mysql_fetch_array($result);

//提取菜单项目的子菜单记录集

$sql="select * from cr_columninfo where columnfatherid=$menu[columnid]";

$result_sub=mysql_query($sql,$Con);

echo "

";

//如果该菜单项目有子菜单，则添加JavaScript onClick语句

if(mysql_num_rows($result_sub)>0)

{

          echo "

 ";  

echo "

";

}

else{

          echo "

 ";  

echo "

";

}

//如果该菜单项目没有子菜单，只显示菜单名称

echo $menu[columnname];

echo "

";

//如果该菜单项目有子菜单，则显示子菜单

if(mysql_num_rows($result_sub)>0)

{

//指定该子菜单的ID和style，以便和onClick语句相对应

echo "

";

echo "

 ";

echo "

";

//将级数加1

$layer++;

//递归调用ShowTreeMenu()函数，生成子菜单

ShowTreeMenu($Con,$result_sub,$layer);

//子菜单处理完成，返回到递归的上一层

echo "

";

}

//子菜单处理完成，返回到递归的上一层，将级数减1

$layer--;

}

echo "

";

}

?>

最后贴上效果图和源代码打包，希望本文对大家有所帮助^_^

下载此文件