[英]How to create a ul - li menu from a tree like array?
I have an array with title
and children
index. 我有一个带title
和children
索引的数组。
title
is always not-null. title
始终不为null。 children
is an array, empty or not-empty. children
是一个数组,空或非空。
Any children
have title
and children
and so on. 任何children
都有title
和children
等等。
$myArray = [
0 => [
'title' => 'N1',
'children' =>
[
0 =>
[
'title' => 'N11',
'children' =>
[
0 =>
[
'title' => 'N111',
'children' => [],
],
],
],
],
],
1 =>
[
'title' => 'N2',
'children' =>
[
0 =>
[
'title' => 'N21',
'children' =>
[],
],
],
],
];
Now, I want to create a drop-down menu with this array. 现在,我想用这个数组创建一个下拉菜单。
I have problem with creating an unordered list ( ul
, li
)from this array. 我有从这个数组创建无序列表( ul
, li
)的问题。
I want my result to be like: 我希望我的结果如下:
<ul>
<li>N1
<ul>
<li>N11
<ul>
<li>N111</li>
</ul>
</li>
</ul>
</li>
<li>N2
<ul>
<li>N21</li>
</ul>
</li>
</ul>
I'm sure this will work : 我相信这会奏效:
function menu($arr) {
echo "<ul>";
foreach ($arr as $val) {
if (!empty($val['children'])) {
echo "<li>" . $val['title'];
menu($val['children']);
echo "</li>";
} else {
echo "<li>" . $val['title'] . "</li>";
}
}
echo "</ul>";
}
Suppose this is your array 假设这是你的数组
$menu = array(
array(
'title'=>'N1',
'children'=>array(
'title'=>'N11',
'children'=>array(
'title'=>'N111',
'children'=>array(),
),
),
),
array(
'title'=>'N2',
'children'=>array(
'title'=>'N21',
'children'=>array(),
)
),
);
You could make use of recursion to build this HTML structure. 您可以使用递归来构建此HTML结构。
function createMenu($arr){
$str = '';
if(is_array($arr)){
$str .= "<li>".$arr['title'];
if(!empty($arr['children'])){
$str .="<ul>";
$str .= createMenu($arr['children'],$str);
$str .="</ul>";
}
$str .= "</li>";
}
return $str;
}
Now call the recursive function to create the HTML 现在调用递归函数来创建HTML
$myMenu ='';
foreach($menu as $arr){
$myMenu .= createMenu($arr);
}
echo "<ul>".$myMenu."</ul>";
exit();
I had to achieve something similar, yet I wanted the HTML generation to be in inside a twig template. 我必须实现类似的东西,但我希望HTML生成在一个twig模板中。 This could look like this: 这看起来像这样:
{% macro printMenuElements(nestedListElements, level = 0, parent = 'root') %}
<ul>
{% for nestedElement in nestedListElements %}
{% set children = nestedElement.children %}
{% set title = nestedElement.title %}
{% if children is not empty and children is iterable %}
<li data-parent="{{ parent }}">
{{ title }}
{{ _self.printMenuElements(children, level +1, title) }}
</li>
{% else %}
<li data-parent="{{ parent }}">
{{ title }}
</li>
{% endif %}
{% endfor %}
</ul>
{% endmacro %}
{% block body %}
<h1>Menu</h1>
{% import _self as helper %}
{{ helper.printMenuElements(yourArray) }}
{% endblock %}
Which generates an HTML output of: 这会生成以下HTML输出:
<ul> <li data-parent="root"> N1 <ul> <li data-parent="N1"> N11 <ul> <li data-parent="N11"> N111 </li> </ul> </li> </ul> </li> <li data-parent="root"> N2 <ul> <li data-parent="N2"> N21 </li> </ul> </li> </ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.