Kentico 分层转换和 bootstrap 手风琴

Question

这是这个问题的延续：

快速浏览。最终目标是基于 Bootstrap 的手风琴，我可以在其中显示 link 和已上传文件的描述。

在 CMS.Desk 中，我有 parent 节点（一个页面，CMS.MenuItem）。然后我有 child 个页面，它们是组。文件（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>

我的 header 转换是这样的（所有级别 0）：

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

我的页脚转换（所有级别 0）：

</div>

每个面板都有打开和关闭div，然后是面板header和面板body。

因此，我的面板 header 是我的第一个 child 页面，而我的面板 body 是 link 和上传文件的描述。

我想在这里，我需要一个子标题，以及用于打开和关闭 divs（均为 1 级）的子页脚，但标题和 body 我不是确定。

面板标题是 3 级，我的面板 body 是 4 级，它们是什么类型的转换？

Answer 1

那里只有两个级别：面板标题和面板 body。

0 级 header：

<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>

这不是层次转换的唯一配置，它只是许多可能方法中的一种。

希望对您有所帮助。

Kentico 分层转换和 bootstrap 手风琴

Kentico hierarchical transformation and a bootstrap accordion

kentico

twitter-bootstrap