Kentico階層変換ブートストラップアコーディオン

Question

これは、この質問の続きです：Kentico ASCX transformation page type properties

ビュー以上速いです。最終目標は、ブートストラップベースのアコーディオンです。ここでは、グループであるアップロードされたファイルのリンクと説明を表示できます。

CMS.Deskには、親ノード（ページ、CMS.MenuItem）があります。私は次に、グループである子ページを持っています。ファイル（pdf、word、pptなど）はアップロードされ、添付されません。

したがって、結果のコードは次のようになります。

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
 

 
    <div class="panel panel-default"> 
 

 
     <div class="panel-heading" role="tab" id="heading1"> 
 
      <h4 class="panel-title"> 
 
       <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1"> 
 
        Group One 
 
       </a> 
 
      </h4> 
 
     </div> 
 

 
     <div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1"> 
 
      <div class="panel-body"> 
 
       <ul> 
 
        <li> 
 
        <a href='#'>Link to Document</a> 
 
        <p>Document subscription</p> 
 
        </li> 
 
        <li> 
 
        <a href='#'>Link to Document</a> 
 
        <p>Document subscription</p> 
 
        </li> 
 
        <li> 
 
        <a href='#'>Link to Document</a> 
 
        <p>Document subscription</p> 
 
        </li>     
 
       <ul> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="panel panel-default"> 
 

 
     <div class="panel-heading" role="tab" id="heading2"> 
 
      <h4 class="panel-title"> 
 
       <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2"> 
 
        Group Two 
 
       </a> 
 
      </h4> 
 
     </div> 
 
     <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2"> 
 
      <div class="panel-body"> 
 
           <ul> 
 
        <li> 
 
        <a href='#'>Link to Document</a> 
 
        <p>Document subscription</p> 
 
        </li> 
 
        <li> 
 
        <a href='#'>Link to Document</a> 
 
        <p>Document subscription</p> 
 
        </li> 
 
        <li> 
 
        <a href='#'>Link to Document</a> 
 
        <p>Document subscription</p> 
 
        </li>     
 
       <ul> 
 
      </div> 
 
     </div> 
 

 
    </div> 
 

 
    
 

 
</div>

は私のヘッダ変換は、この（すべてのレベル0）のようになります。

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

私のフッターの変換（すべてのレベル0）：

</div>

各パネルは、オープンとクローズDIV、次いでパネルヘッダとパネル本体を有しています。

私のパネルヘッダーは最初の子ページですが、パネル本体はアップロードされたファイルのリンクと説明です。

ここでは、私はサブ見出しと、開いていると閉じているdiv（両方のレベル1）のサブフッターが必要ですが、見出しと本文はわかりません。

パネルの見出しはレベル3、パネルのレベルはレベル4、どのようなタイプのものになりますか？

Answer 1

パネルの見出しとパネルの本体の2つのレベルがあります。

レベル0ヘッダ：

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 

レベル0アイテム変換：

<div class="panel panel-default"> 

    <div class="panel-heading" role="tab" id="heading1"> 
     <h4 class="panel-title"> 
      <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1"> 
       Group One 
      </a> 
     </h4> 
    </div> 

    <div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1"> 
     <div class="panel-body"> 
      <ul> 
       {^SubLevelPlaceHolder^}     
      <ul> 
     </div> 
    </div> 
</div> 

レベル1項目変換：

   <li> 
       <a href='#'>Link to Document</a> 
       <p>Document subscription</p> 
       </li> 

レベル0フッタ：

</div> 

これは階層変換の唯一の構成ではなく、多くの可能なアプローチの1つです。

これが役に立ちます。