3v4l.org

run code in 150+ php & hhvm versions
Bugs & Features
<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 - 7.1.0
<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>