PHP массив для начальной загрузки аккордеона

Это простая самозагрузка аккордеон:PHP массив для начальной загрузки аккордеона

<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" 
    ) 
); 
?>

Вот как я пытаюсь динамически генерировать бух tstram accordion:

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

На самом деле он не работает должным образом, что я делаю неправильно?

источник

2015-07-27 neoDev

@JFDion [There] (http://codepad.viper-7.com/zf9JNm) - это то, что я пытаюсь сейчас, но он не работает на все ... На самом деле, я немного смущен, потому что я не знаю, как динамически воссоздать структуру аккордеона ... Это сводит меня с ума со всего дня. – neoDev

. Я думаю, что то, что вам не хватало здесь, - это оператор конкатенации после first '$ out. =' –

@Uchiha, пожалуйста, не могли бы вы объяснить его более конкретно? – neoDev

я вещь, что это поможет вам:

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

Если это вам не поможет, сообщите мне;)

источник

2015-07-27 17:25:42

Можете ли вы посмотреть обновленный код в моем вопросе, пожалуйста, – neoDev

Попробовали ли вы поместить класс «аккордеон-ineer»? (См. Раздел «Редактирование» выше). –

PHP массив для начальной загрузки аккордеона

ответ

Смежные вопросы