Question

我将以下数组输出到等效的JavaScript JSON变量，我尝试创建一个基于动态的导航栏。

$navArray = array(
    array('id'=>1,'parent'=>0,'text'=>'1A','href'=>'1a'),
    array('id'=>2,'parent'=>1,'text'=>'2B','href'=>'2b'),
    array('id'=>3,'parent'=>1,'text'=>'3C','href'=>'3c'),
    array('id'=>4,'parent'=>2,'text'=>'4D','href'=>'4d'),
    array('id'=>5,'parent'=>2,'text'=>'5E','href'=>'5e'),
    array('id'=>6,'parent'=>5,'text'=>'6F','href'=>'6f'),
    array('id'=>7,'parent'=>5,'text'=>'7G','href'=>'7g'),
    array('id'=>8,'parent'=>3,'text'=>'8H','href'=>'8h'),
);

脚本（JavaScript / jQuery）应该获取数组并根据父'id'返回HTML，如下所示：

<ul>
    <li>
        <a href="1a">1A</a>
        <ul>
            <li>
                <a href="2b">2B</a>
                <ul>
                    <li>
                        <a href="4d">4D</a>
                    </li>
                    <li>
                        <a href="/סוכרת">5E</a>
                        <ul>
                            <li>
                                <a href="6f">6F</a>
                            </li>
                            <li>
                                <a href="7g">7G</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="3c">3C</a>
                <ul>
                    <li>
                        <a href="8h">8H</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
<ul>

HTML屏幕结果应如下所示：

我尝试过做某事......但那没用。

$('li.dropdown').hover(
    function(){
        $(this).find('ul').slideDown();
    },
    function(){
        $(this).find('ul').slideUp();
    });

如何动态创建多维级HTML导航栏？

Answer 1

听起来像递归的经典案例，你能改变数组对象以包含他们自己的孩子吗？

$navArray = array(
    array('id'=>1,'text'=>'1A','href'=>'1a', 'children' => array(
      array('id'=>2,'text'=>'2B','href'=>'2b', 'children' => array(
        array('id'=>4,'text'=>'4D','href'=>'4d'),
        array('id'=>5,'text'=>'5E','href'=>'5e', 'children' => array(
          array('id'=>6,'text'=>'6F','href'=>'6f'),
          array('id'=>7,'text'=>'7G','href'=>'7g'),
        )),
      )),
      array('id'=>3,'text'=>'3C','href'=>'3c', 'children' => array(
        array('id'=>8,'text'=>'8H','href'=>'8h')
      )),
    )),
);

然后，如果你将数组输出到JS（let arr = <?=json_encode($navArray)?>），你可以将它输入到你的函数中，该函数将以递归的方式运行在子函数中，类似于此应该有效：

function createMenuItems(arr) {
  let output = '<ul>'
  for (let item of arr) {
    output += `<li><a id="${item.id}" href="${item.href}">${item.text}</a></li>`
    if (item.children && item.children.length) {
      output += createMenuItems(item.children);
    }
  }
  output += '</ul>'
  return output
}

数组中的动态HTML导航栏

1 个答案: