在手风琴中选择默认的打开行

时间:2019-04-04 17:49:41

标签: javascript

我正在尝试设置一个带有手风琴的页面,我可以在其中更改每个季度默认打开的行。这是在Sharepoint网站上完成的,因此我只能做些限制。

该代码使用Sharepoint Webpart标题提取显示其内容的HTML编码。我没有编写此代码,而是从Mark Rackley的“ Hillbilly选项卡”网站上进行了复制/修改。

这是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> ​</td>
      </tr>
   </tbody>
</table>

因此,在这种情况下,我希望FY19Q1行在默认情况下处于打开状态。现在,FY18Q4是打开的(当我单击其他位置时会关闭)。

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

1 个答案:

答案 0 :(得分:0)

使用jQuery手风琴的active选项。 Active

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