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

Posted 2023-03-06

【中文标题】Bootstrap - 使用 php 的手风琴风格错误

【英文标题】：Bootstrap - Error in the style of the accordion with php

【发布时间】：2020-09-30 04:00:21

【问题描述】：

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

$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);

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

菜单如下所示：

使用此代码：

<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>

朋友能告诉我如何组织这个或我做错了什么吗？我感谢任何cmets。最终结果如下所示。

【参考方案1】：

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

您可以更改并重试。 （它们应该是动态值，用于基本解决循环）; headingOne, collapseOne.

如果你在循环之前测试小说，你会自己发现问题。

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

Bootstrap 4 - collapse documentation