Jill 筆記 - 線上書籍

:::

6. jquery ui Accordion menu 重新整理後記住所選的選項 next

PHP開發心得
=======

1. ```
  <pre class="brush:xml;">
  基本範例
  <div class="panel-group" id="accordion">
            <div class="panel-heading">
              
              <strong style="font-size: 30px;">手風琴效果示範</strong>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                  <a class="accordion-toggle" href="#">父節點一</a>
              </div>
              <div id="collapse1" class="panel-collapse collapse" style="height: 0px;">
                <div class="panel-body">
                  <ul class="nav nav-pills nav-stacked">
                    <li><a href="#">子節點一</a></li>
                    <li><a href="#">子節點二</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapse2">
                <a class="accordion-toggle" href="#">父節點二</a>
              </div>
                <div id="collapse2" class="panel-collapse collapse" style="height: 0px;">
                  <div class="panel-body">
                    <ul class="nav nav-pills nav-stacked">
                      <li><a href="#">子節點一</a></li>
                      <li><a href="#">子節點二</a></li>
                    </ul>
                  </div>
                </div>
            </div>
          </div>
  ```
2. 應用在smarty樣板 ```
  <pre class="brush:xml;">
  <div class="panel-group" id="accordion">
    <div class="panel-heading">
      <strong style="font-size: 30px;">test</strong>
    </div>
    <{foreach from=$group_list key=k item=unit}>
      <div class="panel panel-primary">
        <div class="panel-heading " data-toggle="collapse" data-parent="#accordion" href="#collapse_<{$k}>">
            <a class="accordion-toggle bg-primary" href="#"><{$unit}></a>
        </div>
        <div id="collapse_<{$k}>" class="panel-collapse collapse" style="height: 0px;">
          <div class="panel-body">
            <ul class="nav nav-pills nav-stacked">
              <{foreach from=$cattreerootArr[$k] key=ctRootId item=ctRootName}>
                <li><a href="http://www2.tn.edu.tw/modules/tadnews/page.php?nsn=1"><{$ctRootName}></a></li>
              <{/foreach}>
            </ul>
          </div>
        </div>
      </div>
    <{/foreach}>
  </div>
  ```
3. jquery-ui(手風琴效果-更佳)  
   ※記得先引入jquery-ui，xoops模組請在php檔引入get\_jquery(true); ```
  <pre class="brush:xml;">
  <script>
    $(function() {
      $( "#accordion" ).accordion({
        collapsible: true
      });
    });
  </script>
  <div id="accordion">
    <{foreach from=$block.group_list key=k item=unit}>
      <h3><{$unit}></h3>
      <div>
        <ul>
          <{foreach from=$block.cattreerootArr[$k] key=ctRootId item=ctRootName}>
            <li><a id="ctRootId_<{$ctRootId}>" href="#"><{$ctRootName}></a></li>
          <{/foreach}>
        </ul>
      </div>
    <{/foreach}>
    
  </div>
  ```
4. 參考網站  
   <https://jqueryui.com/accordion/#collapsible>

MarkDown