使用 PHP 展开和折叠树形菜单答案

【问题标题】：Tree menu expand and collapse using PHP使用 PHP 展开和折叠树形菜单
【发布时间】：2014-11-13 04:50:40
【问题描述】：

我有以下数组：

$firstlevel=array(“numbers”,”vowels”,”animals”,”birds”);    
$numbers=array(“one”,”two”,”three”);    
$vowels= array (“a”,”e”,”i”,,”o”,”u”);    
$animals=array(“lion”,”tiger”,”dog”,”wolf”,”horse”,”Zebra”);    
$birds=array(“parrot”,”sparrow”,”crow”);

我需要如下树形菜单：（仅使用 PHP）

+ numbers
+ vowels
+ animals
+ birds

 Reset button

点击后展开如下：

+ Fruits
- Vegetables
  + Drumstick
  + Lady’s finger
+ Animals
+ Birds

一旦我们点击另一个第一级项目，应该保留相同的格式展开相应的子节点。

【问题讨论】：

在这里使用一些 css 和 JQuery 技巧。
你有什么代码可以解决这个问题吗？
@AshiqueCM 正如我所提到的，我只想使用 PHP。没有任何javascript
@Jonno_FTW 不，我没有完全工作。我只显示了树的第一层。$firstlevel=array("fruits","vegetables","animals","birds"); $fruits=array("芒果","苹果","葡萄"); $vegetables= array ("drumstick","ladysfinger"); $animals=array("狮子","老虎","狐狸","狼","大象","斑马"); $birds=array("鹦鹉","麻雀","乌鸦");回声'
- '.$value.'
';
不可能只使用 PHP，你必须在这里使用 CSS 和 JQuery 来实现。

标签： php menu treeview subtree hierarchical-trees

【解决方案1】：

这适用于纯 css、js 和 html 代码。对于 php，请参阅下一节。

$(document).ready(function(){
       $('.child').hide(); 
});
$( "a" ).click(function() {
Show(this);
});

function Show(obj)
    {
    		var ObjId = obj.id;
        var Obj = ObjId.split('-');
        var id = Obj[0];
        
        var symb = $('#'+id+'-symbol').html();
        
        if(symb.trim() == "+")
        {
            $('#'+id).show(1000);
            $('#'+id+'-symbol').html("- ");
        }
        else
        {
            $('#'+id).hide(1000);
            $('#'+id+'-symbol').html("+ ");
        }
        
    }

ul {
        list-style: none;
        margin-left:10px;
    }
ul>li{
  margin-left:15px;
  padding-top:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
    <a id='fruit-a' style='text-decoration:none; color:black;' href='#'>
    <span  id='fruit-symbol'>+ </span>
      Fruit
    </a>
    <ul class='child'  id='fruit'>
      <li>* numbers</li>
      <li>* vowels</li>
      <li>* animals</li>
      <li>* birds</li>
      
    </ul>
  </li>
</ul>

你可以用 php 做到这一点。

<html>
<head>
<style>
    ul {
        list-style: none;
    }

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('.child').hide();
    });

    function Show(id)
    {
        var symb = $('#'+id+'-symbol').html();

        if(symb.trim() == "+")
        {
            $('#'+id).show(1000);
            $('#'+id+'-symbol').html("- ");
        }
        else
        {
            $('#'+id).hide(1000);
            $('#'+id+'-symbol').html("+ ");
        }

    }

</script>
</head>
<body>

<?php

$firstlevel=array("numbers","vowels","animals","birds");    
$numbers=array("one","two","three");    
$vowels= array ("a","e","i","o","u");    
$animals=array("lion","tiger","dog","wolf","horse","Zebra");    
$birds=array("parrot","sparrow","crow");

$AllArray = ["firstlevel", "numbers", "vowels", "animals", "birds"];

echo "<ul>";

foreach($AllArray as $a)
{

    echo "<li><a onclick=\"Show('".$a."')\" style='text-decoration:none; color:black;' href='#'><span  id='".$a."-symbol'>+ </span>".$a."</a><ul class='child'  id='".$a."'>";

    foreach($$a as $id=>$val)
    {
        echo "<li>* ".$val."</li>";
    }

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

echo "</ul>";

?>
</body>
</html>

您可以通过此链接查看结果https://www.tehplayground.com/5SHAWKeEcsm5O5Ww

【讨论】：

请解释您答案中的代码的作用，以便对所涉及技术不熟悉的人有机会理解和重用它:-)
您好 Wndrr，我已将结果链接与 php 和 html。请再次参考。

【解决方案2】：

use jquery with php u will get i did same thing try this......
include this first

<div class="menu_list" id="secondpane"> <!--Code for menu starts here-->
        <p class="menu_head">Data Warehousing</p>
        <div class="menu_body">
        <a href="teradata.php">Teradata Online training</a>
         <a href="data-warehousing.php">Informatica Online training</a>
         <a href="#">Cognos Online training</a> 
        </div>
        <p class="menu_head">SAP</p>
        <div class="menu_body">
         <a href="#">SAP BO</a>
         <a href="sap-abap.php">SAP ABAP</a>
         <a href="#">SAP BI/BW</a>
         <a href="#">SAP FICO</a>
         <a href="#">SAP HR</a> 
        </div>
        <p class="menu_head">ORACLE</p>
        <div class="menu_body">
          <a href="#">ORACLE DBA</a>
         <a href="#">ORACLE 11g</a>
       </div>
       <p class="menu_head">SQL</p>
        <div class="menu_body">
          <a href="#">SQL DBA</a>
       </div>
        <p class="menu_head">JAVA</p>
        <div class="menu_body">
          <a href="core-java.php">Core JAVA</a>
         <a href="advanced-java.php">Advanced JAVA</a>
       </div>
        <p class="menu_head">SAS</p>
        <div class="menu_body">
          <a href="#">SAS BI</a>
         <a href="#">SAS CDM</a>
       </div>
        <p class="menu_head">Testing Tools</p>
        <div class="menu_body">
          <a href="#">Manual Testing+QTP Training</a>
         <a href="#">ETL Testing</a>
         <a href="#">SELENIUM Training</a>          
       </div>
       <p class="menu_head">Android Training</p>
       <div class="menu_body">
          <a href="android.php">Android Course</a>

       </div>
       <p class="menu_head">Sharepoint Training</p>
       <p class="menu_head">.NET Training</p>
        <div class="menu_body">

         <a href="#">ASP .NET Training</a>
         <a href="#">C# Training</a>            
       </div>
  </div>

add these styles

@charset "utf-8";
/* CSS Document */


body {
    margin: 10px auto;
    font: 105%/140% Verdana,Arial, Helvetica, sans-serif;
}
.menu_list {    
    width:250px;
}
.menu_head {
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
    margin:1px;
    font-weight:bold;
    background:#83C7DA url(left.png) center right no-repeat;
    font-size:15px;
    color:black;
    border-radius:5px;
}
.menu_body {
    display:none;
}
.menu_body a{
    display:block;
    color:#C00;
    background-color:#EFEFEF;
    padding-left:10px;
    font-weight:bold;
    text-decoration:none;
}
.menu_body a:hover{
  color: #000000;
  text-decoration:underline;
  }

integrate jQuery.js library then only it will work.....
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--//---------------------------------+
//  Developed by Roshan Bhattarai 
//  Visit http://roshanbh.com.np for this script and more.
//  This notice MUST stay intact for legal use
// --------------------------------->
$(document).ready(function()
{

    //slides the element with class "menu_body" when mouse is over the paragraph
    $("#secondpane p.menu_head").mouseover(function()
    {
         $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
         $(this).siblings().css({backgroundImage:"url(left.png)"});
    });
});
</script>

【讨论】：

【解决方案3】：

首先，你需要创建一个这样的表：

CREATE TABLE IF NOT EXISTS `menus` (
  `cid` int(10) NOT NULL,
  `name` varchar(20) NOT NULL,
  `parent_cat` int(10) NOT NULL,
  PRIMARY KEY (`cid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `menus` (`cid`, `name`, `parent_cat`) VALUES
(1, 'numbers', 0),
(2, 'vowels', 0),
(3, 'one', 7),
(4, 'two', 7),
(5, 'a', 2),
(6, 'e', 2),
(7, 'ones', 1),
(8, 'tens', 1),
(9, 'ten', 8),
(10, 'twenty', 8);

下载this plug-in 这是我用于创建展开和折叠菜单的 php 代码：

<?php
    $viewsql = "SELECT * FROM menus";
    $viewsqlres=mysql_query($viewsql);
    while ( $viewsqlrow = mysql_fetch_array($viewsqlres))    {
        $viewarray[$viewsqlrow['cid']] = array('cid'=>$viewsqlrow['cid'],'name' => $viewsqlrow['name'],'parent_cat' => $viewsqlrow['parent_cat']);
    }


    function view_generate_menu($parent_cat_view) //recursive function that prints category as a nested html unorderd list
    {
        $has_childs_view = false;
        ////this prevents printing 'ul' if we don't have subcategory for this category
        global $viewarray;
        ////use global array variable instead of a local variable to lower stack memory requierment
        foreach($viewarray as $key => $value_view)    {

            if ($value_view['parent_cat'] == $parent_cat_view)    {
                //if this is the first child print '<ul>'

                if ($has_childs_view === false)    {
                    //don't print '<ul>' multiple times
                    $has_childs_view = true;
                    ?>
    <ul id="tree">
    <?php  } ?>
    <li><?php  echo $value_view['name']; ?>
    <?php
                view_generate_menu($key);
                ////call function again to generate nested list for subcategory belonging to this category
                echo '</li>';
            }

        }


        if ($has_childs_view === true) echo '</ul>';
    }

    view_generate_menu(0);
    ?>

一些样式：

<style>
#tree li {
list-style: none outside none;}
</style>

【讨论】：