<html>
<head>
</head>
<style>
/*li {list-style-type:none;}*/
span{cursor: pointer;background-color: yellowgreen;font-size: 20px}
.hidden{display: none}
</style>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<body>
<?php
$arr = Array(
Array("cat_id" => 3, "cat_name" => "JavaScript", "parent_id" => 0, "level" => 0),
Array("cat_id" => 5, "cat_name" => "Jquery", "parent_id" => 3, "level" => 1),
Array("cat_id" => 6, "cat_name" => "JS高级", "parent_id" => 3, "level" => 1),
Array("cat_id" => 7, "cat_name" => "JS高级更高级1", "parent_id" => 6, "level" => 3),
Array("cat_id" => 8, "cat_name" => "JS高级更高级2", "parent_id" => 6, "level" => 3),
Array("cat_id" => 9, "cat_name" => "JS高级更高级3", "parent_id" => 6, "level" => 3),
Array("cat_id" => 4, "cat_name" => "PHP", "parent_id" => 0, "level" => 0),
Array("cat_id" => 10, "cat_name" => "PHP高级1", "parent_id" => 4, "level" => 0),
Array("cat_id" => 12, "cat_name" => "PHP高级2", "parent_id" => 4, "level" => 0),
Array("cat_id" => 13, "cat_name" => "PHP高级3", "parent_id" => 4, "level" => 0)
);
//创建树形菜单
function createTree(&$arr, $parent_id) {
$hide = "";
if ($parent_id != 0) {
$hide = "hidden";
}
$funcName = __FUNCTION__;
$ul = "";
$li = "";
for ($i = 0; $i < count($arr); $i++) {
if ($arr[$i]["parent_id"] == $parent_id) {
$child = $funcName($arr, $arr[$i]['cat_id']);
$li .= "\r\n<li id=\"{$arr[$i]['cat_id']}\" class=\"cate\"><span>{$arr[$i]["cat_name"]}</span>{$child}</li>\r\n";
}
}
if ($li != "") {
$ul = "
<ul class=\"cate {$hide}\">{$li}</ul>
";
}
return $ul;
}
echo createTree($arr, 0);
?>
</body>
<script>
(function() {
$(".cate").hover(function() {
$(this).children("ul").show()
}, function() {
$(this).children("ul").hide()
})
})()
</script>
</html>
- Output for 4.3.0 - 4.3.11, 4.4.0 - 4.4.9, 5.0.0 - 5.0.5, 5.1.0 - 5.1.6, 5.2.0 - 5.2.17, 5.3.0 - 5.3.29, 5.4.0 - 5.4.45, 5.5.0 - 5.5.38, 5.6.0 - 5.6.40, 7.0.0 - 7.0.33, 7.1.0 - 7.1.33, 7.2.0 - 7.2.33, 7.3.0 - 7.3.33, 7.4.0 - 7.4.33, 8.0.0 - 8.0.30, 8.1.0 - 8.1.28, 8.2.0 - 8.2.18, 8.3.0 - 8.3.7
- <html>
<head>
</head>
<style>
/*li {list-style-type:none;}*/
span{cursor: pointer;background-color: yellowgreen;font-size: 20px}
.hidden{display: none}
</style>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<body>
<ul class="cate ">
<li id="3" class="cate"><span>JavaScript</span>
<ul class="cate hidden">
<li id="5" class="cate"><span>Jquery</span></li>
<li id="6" class="cate"><span>JS高级</span>
<ul class="cate hidden">
<li id="7" class="cate"><span>JS高级更高级1</span></li>
<li id="8" class="cate"><span>JS高级更高级2</span></li>
<li id="9" class="cate"><span>JS高级更高级3</span></li>
</ul>
</li>
</ul>
</li>
<li id="4" class="cate"><span>PHP</span>
<ul class="cate hidden">
<li id="10" class="cate"><span>PHP高级1</span></li>
<li id="12" class="cate"><span>PHP高级2</span></li>
<li id="13" class="cate"><span>PHP高级3</span></li>
</ul>
</li>
</ul>
</body>
<script>
(function() {
$(".cate").hover(function() {
$(this).children("ul").show()
}, function() {
$(this).children("ul").hide()
})
})()
</script>
</html>
preferences:
276.81 ms | 408 KiB | 461 Q