首页 > 解决方案 > 在手风琴中选择默认的打开行

问题描述

我正在尝试使用手风琴设置一个页面,我可以在其中更改默认打开的行,每季度。这是在 Sharepoint 站点中完成的,所以我的能力有限。

该代码使用 Sharepoint webpart 标题来提取它们显示其内容的 HTML 编码。这段代码不是我写的,我是从 Mark Rackley 的“Hillbilly tabs”网站复制/修改的。

这是Javascript:

<script type="text/javascript">
     jQuery(document).ready(function($) {
         //Put the WebPart Title for all the Web Parts you wish
         //to put into the jQuery UI Accordion into the array below.
        Hillbillyaccordion(["FY18Q4","FY19Q1","FY19Q2"]);
    });

    function Hillbillyaccordion(webPartTitles)
    {
        for(index in webPartTitles)
        {
            var title = webPartTitles[index];
            $("#accordion").append('<h3>'+title+'</h3>');
            $("span:contains('"+title+"')").each(function(){
                if ($(this).text() == title){
                    var webPart = $(this).hide().closest("span").closest("[id^='MSOZoneCell_WebPart']");
                    if ($(webPart).contents().html() != undefined)
                    {
                         webPart = $(webPart).contents();
                    }
                    $("#accordion").append(webPart);
                }
            });
        }
        $("#accordion").accordion({ heightStyle: "content" });
    }


</script>
<div id="accordion"></div>

的HTML:

<table class="ms-rteTable-0" cellspacing="0" style="width: 65%;">
   <tbody>
      <tr>
         <td class="ms-rteTable-0" style="width: 100%;"> 
            <div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false">
               <div class="ms-rtestate-notify  ms-rtestate-read f0bd8512-73d2-4d90-822d-23db740f5665" id="div_f0bd8512-73d2-4d90-822d-23db740f5665" unselectable="on">
               </div>
               <div id="vid_f0bd8512-73d2-4d90-822d-23db740f5665" unselectable="on" style="display: none;">
               </div>
            </div>
            <div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false">
               <div class="ms-rtestate-notify  ms-rtestate-read 5fc7f31f-65af-432a-8b21-10c760226ccf" id="div_5fc7f31f-65af-432a-8b21-10c760226ccf" unselectable="on">
               </div>
               <div id="vid_5fc7f31f-65af-432a-8b21-10c760226ccf" unselectable="on" style="display: none;">
               </div>
            </div>
            <div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false">
               <div class="ms-rtestate-notify  ms-rtestate-read 5233fd78-4eff-410c-a3df-eedf46f80376" id="div_5233fd78-4eff-410c-a3df-eedf46f80376" unselectable="on">
               </div>
               <div id="vid_5233fd78-4eff-410c-a3df-eedf46f80376" unselectable="on" style="display: none;">
               </div>
            </div>
            <p>
               <br/>&#160;</p>
            <div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false">
               <div class="ms-rtestate-notify  ms-rtestate-read 2783a954-2339-4353-b420-63a2dd92b0e5" id="div_2783a954-2339-4353-b420-63a2dd92b0e5" unselectable="on">
               </div>
               <div id="vid_2783a954-2339-4353-b420-63a2dd92b0e5" unselectable="on" style="display: none;">
               </div>
            </div> ​&lt;/td>
      </tr>
   </tbody>
</table>

所以在这种情况下,我希望 FY19Q1 行默认打开。现在,FY18Q4 是打开的(当我点击其他地方时关闭)。

想要任何提示或帮助。谢谢你。

标签: javascript

解决方案


使用activejQuery 手风琴选项。 积极的

 $("#accordion").accordion({ heightStyle: "content", active: 1/*The 2nd accordian*/ });

推荐阅读