如何分类列表？ [PHP 手风琴]答案

【问题标题】：how to category list? [PHP accordion]如何分类列表？ [PHP 手风琴]
【发布时间】：2022-01-05 07:39:57
【问题描述】：

我需要创建无限的类别，我使用 php + mysql。

我的数据库结构。

id	name	parent_id
1	Electronic	0
2	Laptop	1
3	Desktop	1
4	Car	0
5	Renault	4
6	Megane	5

我想要达到的外观；

我想用 php 制作一个这样的手风琴菜单，但我真的找不到例子。

你能给我推荐一个方法吗？

【问题讨论】：

好吧，如果没有即插即用的解决方案，你会如何想象你能做到？（请记住，PHP 只是为了让事情井井有条，而 HTML/css 将使它看起来像一个菜单）
我不懂你。你到底想说什么？
我在问你你认为你会怎么做。这是一个很好的起点。从逻辑上讲，您将如何处理这个问题？另外，导航是只有 2 级深还是更深？
您的问题是关于检索/循环浏览信息还是关于如何实际构建 HTML 并使用 CSS 设置样式？
只有 2 个级别。我在这里问这个问题的目的是为它寻找方法推荐。或一个例子。我已经可以将其作为纯 html/css 执行，重要的是与 php 集成。是的，我问的是 php 方面。我找不到手风琴菜单的示例（BY PHP）

标签： php html css mysql menu

【解决方案1】：

PHP 部分：例如，创建一个带有一个参数的递归函数。参数为parentId，默认值为0。

在此函数内部执行一个查询，选择所有以 parent_id 为函数参数的条目。

现在做一个 foreach。在 foreach 内部调用此函数，但将 id（不是 parentid）作为参数，并将子查询的结果作为新列添加到行的结果中。

这样你就得到了一个带有嵌套的数组。

用嵌套返回这个数组。

为了向您展示基本上再次做同样的事情。创建一个递归函数，它只遍历给定的数组并在 foreach 内部作为您给子数组的参数进入下一个级别。然后你回显当前条目的 html 代码。

对于样式使用引导程序。

这也许不是最美丽的方式，但却是一种简短易行的方式。

旧时：请记住，无限嵌套在具有多个级别时可能会令人困惑。

您正在寻找类似于以下内容的内容： https://stackoverflow.com/a/5726311/10790010

【讨论】：

谢谢，但我想我没有解释我的问题。我能够在我的表中正确插入和删除。我只想以“手风琴”菜单样式在网页上显示它。为此，我在上面编写了我的代码。但我没有得到我想要的结果。
好的，那么首先：您是否能够从数据库中读取数据并以结构化的方式显示它？ html 结构应该是这样的混合：getbootstrap.com/docs/5.1/components/navs-tabs/#using-dropdowns 和这样的：getbootstrap.com/docs/5.1/components/accordion 当这一步完成后，然后使用类似getbootstrap.com/docs/5.1/components/collapse 的东西来赋予它功能。

【解决方案2】：

所有代码都是用PHP编写的，您可以递归搜索您的数据库。

HTML 也由 PHP 生成，带有 CreateHtml 函数，它只适用于数组。

您必须插入数据库详细信息用户 = "" 密码 = 主机 = "本地主机" 数据库 = ""

<?php

    function CreateHtmlElements($dom, $insertInto, $array)
    {
        foreach($array as $k=>$v)
        {
            //Use "?tagname" before a tag name
            if (strpos($k, '?') !== false)
            {
                $str = substr($k, 1);
                $elem = $dom->createElement($str, htmlentities($v));
                foreach($array as $k2=>$v2)
                {
                    if ($k2 != "" && strpos($k2, '?') === false)
                    {
                        //extend your array with functions use "fn"
                        if ($k2 == "fn")
                        {
                            foreach($v2 as $v3)
                            {
                                CreateHtmlElements($dom, $elem, $v3());
                            }
                        }
                        else if (!is_array($v2))
                        {
                            $elem->setAttribute($k2, $v2);
                        }
                    }
                }
                $insertInto->appendChild($elem);
                $insertInto = $elem;
            }
            if (is_array($v))
            {
                CreateHtmlElements($dom, $insertInto, $v);
            }
        }
    }

    function CreateHtml($array)
    {
        $dom = new DOMDocument("1.0");
        CreateHtmlElements($dom, $dom, $array);
        echo $dom->saveHTML();
    }


    function DatabaseSearch($parent=0) {
        $USER = "";
        $PASSWORD = ;
        $HOST = "localhost";
        $DATABASE = "";
        
        $CON = mysqli_connect($HOST, $USER, $PASSWORD, $DATABASE);
    
        $sel ="SELECT * FROM demo WHERE parent_id=$parent";
        $quer = mysqli_query($CON, $sel);
        $row = mysqli_fetch_all($quer, MYSQLI_ASSOC);
        return $row;
    }

    function CreateList($row) {
        $a = array();
        foreach($row as $k=>$v) {
            $parent = $v['id'];
            $a[] = array(
                //Header
                array(
                    "?div" => $v['name'],
                    "class" => "accordion",
                    "onclick" => "Accordion();",
                    "style" => "position: relative;",
                ),
                //Accordion Body
                array(
                    "?div" => "",
                    "class" => "panel",
                    "style" => "overflow-x: auto;",
                    CreateList(DatabaseSearch($parent)),
                ),      
            );
        }        
        return $a;
    }

    echo "<!DOCTYPE html>";
   
    CreateHtml(array(
        "?html" => "",
        "lang" => "en",
        array(
            "?head" => "",
            array(
                "?meta" => "",
                "charset" => "utf-8",
            ),
            array(
                "?meta" => "",
                "name" => "viewport",
                "content" => "width=device-width, initial-scale=1.0",
            ),
            array(
                "?meta" => "",
                "name" => "keywords",
                "content" => "",
            ),
            array(
                "?meta" => "",
                "name" => "description",
                "content" => "",
            ),
            array(
                "?title" => "Demo",
            ),
            array(
                "?style" => "
                    .accordion {
                        background-color: #eee;
                        color: #444;
                        cursor: pointer;
                        margin-top: 2px;
                        margin-bottom: 2px;
                        padding: 15px;
                        border: none;
                        text-align: left;
                        transition: 0.4s;
                        border-radius: 2px;
                        box-shadow: 1px 1px 2px #333;
                    }
                    .active, .accordion:hover {
                        background-color: #ccc;
                    }
                    .accordion:after {
                        content: '\\002B';
                        color: #777;
                        float: right;
                        margin-left: 5px;
                    }
                    .active:after {
                        content: '\\2212';
                    }
                    .panel {
                        display: none;
                        padding: 10px;
                        background-color: white;
                        height: 0;
                        overflow: hidden;
                        border-left: 1px solid #ccc;
                        border-right: 1px solid #ccc;
                    }                
                ",
                "type" => "text/css",
            ),
        ),
        array(
            "?body" => "",
            array(
                "?script" => "
                    function Accordion() {
                        var target = event.target;
                        target.classList.toggle('active');
                        var panel = target.nextElementSibling;
                        if (panel.style.display == 'block') {
                            panel.style.height = 0;
                            panel.style.display = 'none';
                        } else {
                            panel.style.display = 'block';
                            panel.style.height = '100%';
                        } 
                    }
                ",
            ),
            CreateList(DatabaseSearch()),
        ),
    ));

?>

【讨论】：

欢迎来到 Stack Overflow。请阅读How to Answer。转储这么多代码不适合在这里回答问题。
我真的很感谢你。谢谢小。今天早上我通过编写自己的算法以同样的方式提出了解决方案。晚上看到你的回答，才发现自己写的算法是对的。我让它运行成功。不过，还是非常感谢你。
给定的SELECT 查询极易受到 SQL 注入攻击，因此永远不应该这样使用。请查看准备好的语句