php数组引导手风琴答案

【问题标题】：php array to bootstrap accordionphp数组引导手风琴
【发布时间】：2015-07-27 15:22:56
【问题描述】：

这是一个简单的引导手风琴：

<div class="panel-group" id="accordion1">
    <div class="panel panel-info">
        <div class="panel-heading" data-toggle="collapse" data-parent="#accordion3" data-target="#_1-1">XXX</div>
        <div id="_1-1" class="panel-collapse collapse">XXX</div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading" data-toggle="collapse" data-parent="#accordion3" data-target="#_1-2">XXX</div>
        <div id="_1-2" class="panel-collapse collapse">#accordion2</div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading" data-toggle="collapse" data-parent="#accordion3" data-target="#_1-3">XXX</div>
        <div id="_1-3" class="panel-collapse collapse">XXX</div>
    </div>
</div>

要创建子手风琴，我们可以复制#accordion1 并粘贴到accordion2 文本上

HERE 有一个我想要获得的示例，通过将 PHP 数组“转换”为手风琴，例如：

<?php
$unit = array (
    "unit1" => array(
        "outcome1-1" => "element1-1",
        "outcome1-2" => "element1-2"
    ),
    "unit2" => array(
        "outcome2-1" => array(
            "picture2-1" => "img2-1"
        ),
        "outcome2-2" => "element2-2"
    ),
    "unit3" => array(
        "outcome3-1" => "element3-1",
        "outcome3-2" => "element3-2"
    )
);
?>

这是我尝试动态生成引导手风琴的方式：

<?php
function array2accordion($array, $level = 1) {

    $out='<div id="accordion'.$level.'" class="panel-group">';

    $i=0; foreach($array as $key => $elem){ $i++;

        if(!is_array($elem)){

            $out=$out.'
            <div class="panel panel-info">
                <div class="panel-heading" data-toggle="collapse" data-parent="#accordion'.$level.'" data-target="#_'.$key.$level.'-'.$key.$i.'">'.$key.'</div>
                <div id="_'.$key.$level.'-'.$key.$i.'" class="panel-collapse collapse">'.$key.'</div>
            </div>';

        }else{
            $out=$out.'
            <div class="panel panel-info">
                <div class="panel-heading" data-toggle="collapse" data-parent="#accordion'.$level.'" data-target="#_'.$key.$level.'-'.$key.$i.'">'.$key.'</div>
                <div id="_'.$key.$level.'-'.$key.$i.'" class="panel-collapse collapse">'.array2accordion($elem, $level + 1).'</div>
            </div>';
        }
    }

    $out=$out.'</div>';

    return $out; 
}

echo array2accordion($unit);
?>

其实它不能正常工作，我做错了什么？

【问题讨论】：

@JFDion There是我刚刚尝试的，但它根本不起作用......实际上我有点困惑，因为我不知道如何动态地重新创建手风琴结构。 .. 这让我一整天都发疯了
我认为您在这里缺少的是第一个 $out .= 之后的连接运算符
@Uchiha 请你更具体地解释一下

标签： php arrays twitter-bootstrap accordion

【解决方案1】：

我认为这会对您有所帮助：

<?php
function generateAccordion(array $values){
    $i = 1;
$html_accordion = '<div class="panel-group" id="accordion1">';
foreach( $values as $id => $items){
    $html_accordion .= <<<HTML
        <div class="panel panel-info">
        <div class="panel-heading" data-toggle="collapse" data-parent="#accordion3" data-target="#$id">Collapse Nro. $i</div>
        <div id="$id" class="panel-collapse collapse">
HTML;
    foreach($items as $item){
        $html_accordion .= <<<HTML
            <p><a href="#" >$item</a></p>
HTML;
    }//end foreach items

    $html_accordion .= '</div></div>';
    $i++;
}//end foreach collapses elements
$html_accordion .= '</div>';
    return $html_accordion;

}

?>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
        <?php
############################################################################
            //Put here your values:                                
            $accordion1 = array(
                    //$id => [val1, val2, ...]
                    "_1-1" => ["a1", "a2", "a3"],
                    "_1-2" => ["b1", "b2", "b3"],
                    "_1-3" => ["c1", "c2", "c3","c4"]
                    //and so on...
            );
            //output:
            echo generateAccordion($accordion1);
#############################################################################            
        ?>
    </div>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->    
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <!-- Latest compiled and minified JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

你应该把你想在手风琴中显示的项目放入 $accordion1 数组中。

编辑

在您更新的代码中，您忘记了手风琴内部类::

 "<div class="accordion-inner">...</div>"

看到这个帖子Accordion Inside Accordion twitter bootstrap?

这是您的代码更新：

function array2accordion($array, $level = 1) {

    $out='<div id="accordion'.$level.'" class="panel-group">';
    $out.='<div class="accordion-inner">';//LOOK ME!!!

    $i=0; 

    foreach($array as $key => $elem){ $i++;
        if(!is_array($elem)){

            $out=$out.'
            <div class="panel panel-info">
                <div class="panel-heading" data-toggle="collapse" data-parent="#accordion'.$level.'" data-target="#_'.$key.$level.'-'.$key.$i.'">'.$key.'</div>
                <div id="_'.$key.$level.'-'.$key.$i.'" class="panel-collapse collapse">'.$key.'</div>
            </div>';

        }else{
            $out=$out.'
            <div class="panel panel-info">
                <div class="panel-heading" data-toggle="collapse" data-parent="#accordion'.$level.'" data-target="#_'.$key.$level.'-'.$key.$i.'">'.$key.'</div>
                <div id="_'.$key.$level.'-'.$key.$i.'" class="panel-collapse collapse">'.array2accordion($elem, $level + 1).'</div>
            </div>';
        }
    }

    $out=$out.'</div>';
    $out=$out.'</div>';

    return $out; 
}

echo array2accordion($unit);
?>

如果这对您没有帮助，请告诉我；）

【讨论】：

你能看看我问题中更新的代码吗
您是否尝试过放置“accordion-ineer”课程？（参见上面的编辑部分）。