php - Bootstrap - 使用 php 的手风琴风格错误

问题描述

我的数据库中有一个类别表，我正在从中生成一个菜单。我可以通过这种方式完美地生成菜单：

$renderItems = function($items) use (&$renderItems)
{
    echo '<ul>';
    foreach ($items as $item) {
        echo '<li>';
        echo h($item->name);

        if ($item->children) {
            $renderItems($item->children);
        }

        echo '</li>';
    }
    echo '</ul>';
};

$renderItems($list);

我正在尝试以引导手风琴格式设置此菜单的样式，但我发现很难正确生成子项。

菜单如下所示：

使用此代码：

<div class="accordion" id="accordionExample">
        <div class="card">

            <div class="card-header" id="headingOne">
                <h5 class="mb-0">

                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" style="padding: 0px">
                        Menu 1
                    </button>
                </h5>
            </div>

            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                <div class="card-body">
                    <ul style="list-style: none; padding: 0px 0px 0px 10px">
                        <li><i class="fas fa-angle-right"></i> SubMenu 1</li>
                        <hr>
                        <li><i class="fas fa-angle-right"></i> SubMenu 2</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

我试图以这种方式解决它，但我相信有问题。

<div class="accordion" id="accordionExample">
    <div class="card">
        <?php
        $renderItems = function($items) use (&$renderItems)
        {
            foreach ($items as $item) {
                echo '<div class="card-header" id="headingOne">';
                echo '<h5 class="mb-0">';
                echo '<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" style="padding: 0px">';

                echo h($item->nome);
                echo '</button>';
                echo '</h5>';
                echo '</div>';

                echo '<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">';

                if ($item->children) {

                    echo '<div class="card-body">';
                    echo '<ul style="list-style: none; padding: 0px 0px 0px 10px">';
                    echo '<li>';
                    $renderItems($item->children);
                    echo '</li>';
                    echo '</ul>';                            
                    echo '</div>';
                }
                echo '</div>';
              }
          };
          $renderItems($list);
          ?>

          </div>
</div>

朋友能告诉我如何组织这个或我做错了什么吗？我感谢任何评论。最终结果看起来像这样。

标签： phphtmlcssbootstrap-4

Bootstrap 注重 html 属性。你也应该。所以;

您可以更改并重试。（它们应该是动态值您的循环以进行基本解决）；headingOne, collapseOne.

如果您在循环之前测试小说，您将自己看到问题。

这个表达式也是class ="collapse show"; 打开所有元素。如果您愿意，您可能希望在第一个元素中添加“显示”。

Bootstrap 4 - 折叠文档

php - Bootstrap - 使用 php 的手风琴风格错误

问题描述

解决方案

推荐阅读