PHP无限级分类的简单实现方法
PHP无限级分类的简单实现方法,请看截图:
代码是:
<?php
header("Content-type: text/html; charset=utf-8");
$cats = array(
array(
'id' => 1,
'name' => '学术和教育',
'children' => array(
array(
'id' => 1,
'name' => '自然科学',
'children' => null,
),
array(
'id' => 1,
'name' => '人文科学',
'children' => null,
),
array(
'id' => 1,
'name' => '语言科学',
'children' => array(
array(
'id' => 1,
'name' => '小学',
'children' => null,
),
array(
'id' => 1,
'name' => '中学',
'children' => null,
)
),
)
)
),
array(
'id' => 1,
'name' => '生活',
'children' => array(
array(
'id' => 1,
'name' => '二手出租',
'children' => null,
),
array(
'id' => 1,
'name' => '充值卡',
'children' => null,
),
array(
'id' => 1,
'name' => '求职信息',
'children' => null,
)
)
)
);
echo '<div id="Box">';
getTree($cats);
echo '</div>';
function getTree($array)
{
echo '<ul>';
foreach($array as $key=>$items)
{
if($items['children']!=null){
echo '<li class="dir">'.$items['name'].'</li>';
getTree($items['children']);
}
else
echo '<li>'.$items['name'].'</li>';
}
echo '</ul>';
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无限级分类</title>
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#Box{
width:400px;
margin:100px;
border-bottom:1px solid #cccccc;
}
ul{
cursor:pointer;
margin:0px;
padding:0px;
list-style:none;
}
ul li{
padding:5px 0px 5px 20px;
font-size:14px;
background-color:#EDF7FF;
border:1px solid #cccccc;
border-bottom:none;
}
ul ul {
display:none;
}
ul ul li{
background-color:#FFF;
}
.dir{
font-weight:bold;
background:url(https://demo1.saitseo.com/detect/images/l.jpg) no-repeat 10px 10px #EDF7FF;
}
ul ul li.dir{
background-color:#FFFFFF;
}
-->
</style>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript">
$(function(){
$('.dir').click(function(){
if($(this).next().css('display')=='none'){
$(this).next().slideDown(300);
$(this).css({'backgroundImage':'url(https://demo1.saitseo.com/detect/images/d.jpg)','backgroundPosition':'8px 10px'});
}else
{
$(this).next().slideUp(300);
$(this).css({'backgroundImage':'url(https://demo1.saitseo.com/detect/images/l.jpg)','backgroundPosition':'10px 10px'});
}
});
});
</script>
</head>
<body>
原文出处:https://www.ideawu.net/blog/archives/585.html
</body>
</html>