Question

我想从数据库中创建一个多级菜单。在数据库中，我有以下列：'id'，'name'，'parent_id'，'url'。如果item没有子节点，则'parent_id'设置为0。

我使用过本教程：Laravel 4 - Eloquent. Infinite children into usable array?，效果很好，结果如下：

主页

注册

你好

登录

呀

其中，

是

我的

心灵

问题是：如何设置所需的课程，让Zurb Foundation工作？在这种情况下，我只想看[Home]，然后点击它[Register]和[Login]应该出现，依此类推。

打印HTML的最后一个函数是这样的：

    private function htmlFromArray($array) {
    $html = '';
    foreach($array as $k=>$v) {
        $html .= "<ul>";
        $html .= '<li><a href="#">'.$k."</a></li>";
        if(count($v) > 0) {
            $html .= $this->htmlFromArray($v);
        }
        $html .= "</ul>";
    }
    return $html;
    }

这是Zurb网站下拉菜单的示例：

    <a href="#" data-dropdown="drop1">Has Dropdown</a>
    <ul id="drop1" class="f-dropdown" data-dropdown-content>
       <li><a href="#">This is a link</a></li>
       <li><a href="#">This is another</a></li>
       <li><a href="#">Yet another</a></li>
    </ul>

所以我的HTML应该是这样的：

    <a href="#" data-dropdown="drop1">Home</a>
    <ul id="drop1" class="f-dropdown" data-dropdown-content>
       <li><a href="#" data-dropdown="drop2">Register</a></li>
          <ul id="drop1" class="f-dropdown" data-dropdown-content>
             <li><a href="#">Hello</a></li>
          </ul>
       <li><a href="#" data-dropdown="drop3">Login</a></li>
          <ul id="drop1" class="f-dropdown" data-dropdown-content>
             <li><a href="#">Yeah</a></li>
             <li><a href="#" data-dropdown="drop4">Where</a></li>
                <ul id="drop1" class="f-dropdown" data-dropdown-content>
                   <li><a href="#">Is</a></li>
                </ul>
          </ul>
    </ul>

我不知道如何实现这一目标，所以任何帮助都会受到赞赏。或者，如果有人有另一种创建动态，多级菜单的方法，请分享！

Answer 1

从我可以看到你的原始数组看起来像这样：

 $array = array(
    'Home' => array(
            'Register' => array(
                'Hello' => array()
            ),
            'Login' => array(
                'Yeah' => array(),
                'Where' => array(
                    'Is' => array(
                        'My' => array()
                    )
                ),
            )

    )
);

我选择在单独的函数中处理顶级链接，因为那些没有ul / li包装器。

function dropdownList($array) {
    $html = "";
    $dropDownId = 0;

    foreach ($array as $k => $v) {

        if(count($v) > 0) {
            $hasChildren = true;
            $dropDownId++;
        } else {
            $hasChildren = false;
        }

        $html = '<a href="#"' . ($hasChildren ? ' data-dropdown="drop' . $dropDownId . '"' : '') . '>' . $k . '</a>';

        if($hasChildren) {
            $html .= children($v, $dropDownId);
        }

    }

    return $html;
}

function children($array, &$dropDownId) {

    $html = '<ul id="drop' . $dropDownId . '" class="f-dropdown" data-dropdown-content>';

    foreach($array as $k=>$v) {

        if(count($v) > 0) {
            $hasChildren = true;
            $dropDownId++;
        } else {
            $hasChildren = false;
        }

        $html .= '<li><a href="#"' . ($hasChildren ? ' data-dropdown="drop' . $dropDownId . '"' : '') . '>'.$k."</a>\n";
        if($hasChildren) {
            $html .= children($v, $dropDownId);
        }
        $html .= '</li>';
    }
    $html .= "</ul>";
    return $html;
}

输出：

echo dropdownList($array);

<a href="#" data-dropdown="drop1">Home</a>
<ul id="drop1" class="f-dropdown" data-dropdown-content>
    <li>
        <a href="#" data-dropdown="drop2">Register</a>
        <ul id="drop2" class="f-dropdown" data-dropdown-content>
            <li>
                <a href="#">Hello</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#" data-dropdown="drop3">Login</a>
        <ul id="drop3" class="f-dropdown" data-dropdown-content>
            <li>
                <a href="#">Yeah</a>
            </li>
            <li>
                <a href="#" data-dropdown="drop4">Where</a>
                <ul id="drop4" class="f-dropdown" data-dropdown-content>
                    <li>
                        <a href="#" data-dropdown="drop5">Is</a>
                        <ul id="drop5" class="f-dropdown" data-dropdown-content>
                            <li>
                                <a href="#">My</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

我猜想在某个地方嵌入你需要一个实际的链接而不是＃。这不会处理，但你可以，例如在检查$ v之前检查$ v是否为字符串，并在这种情况下交换#in href。

那个说，你考虑过使用顶级酒吧菜单吗？看起来更合适:) http://foundation.zurb.com/docs/components/topbar.html

我在Laravel中设置了这个，所以如果您对该解决方案感兴趣，请告诉我。

Laravel 4 / Zurb Foundation多级动态菜单

1 个答案: