在SharePoint 2013中創建手風琴菜單

Question

我是SharePoint新手。根據客戶的要求，我需要在SharePoint中開發一個團隊站點。某些頁面需要在手風琴菜單中顯示內容，如下面的屏幕截圖所示。 Screenshot

這在Microsoft的SharePoint幫助上可用。以下是相同的鏈接。我相信他們也會爲這個支持網站使用SharePoint。任何人都可以分享他們的這種類型的頁面的經驗？僅使用SharePoint功能可能嗎？還是需要創建自定義HTML頁面？一些例子將非常感激。提前致謝。

https://support.office.com/en-us/article/SharePoint-Online-help-83c1c11b-3d7c-4852-b597-46309e0892b3?ui=en-US&rs=en-US&ad=US

Answer 1

構建它的自定義使用SharePoint API爲您的數據源。任何不是純粹開箱即用的應該從頭開始。這就像試圖在一個圓孔中安裝一個方形釘子。你在廣場掛釘的角落削減，但它永遠不會完全適合圓孔。

以下代碼位於here。

你可能需要等待所有SharePoint的要加載，還有內置的功能，可以幫助您像這樣的

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(YOURINITFUNCTIONHERE); 

古德勒克！

\t 
 
$(document).ready(function() { 
 
    function close_accordion_section() { 
 
     $('.accordion .accordion-section-title').removeClass('active'); 
 
     $('.accordion .accordion-section-content').slideUp(300).removeClass('open'); 
 
    } 
 
    
 
    $('.accordion-section-title').click(function(e) { 
 
     // Grab current anchor value 
 
     var currentAttrValue = $(this).attr('href'); 
 
    
 
     if($(e.target).is('.active')) { 
 
      close_accordion_section(); 
 
     }else { 
 
      close_accordion_section(); 
 
    
 
      // Add active class to section title 
 
      $(this).addClass('active'); 
 
      // Open up the hidden content panel 
 
      $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
 
     } 
 
    
 
     e.preventDefault(); 
 
    }); 
 
    
 
});

/*----- Accordion -----*/ 
 
.accordion, .accordion * { 
 
    -webkit-box-sizing:border-box; 
 
    -moz-box-sizing:border-box; 
 
    box-sizing:border-box; 
 
} 
 
    
 
.accordion { 
 
    overflow:hidden; 
 
    box-shadow:0px 1px 3px rgba(0,0,0,0.25); 
 
    border-radius:3px; 
 
    background:#f7f7f7; 
 
} 
 
    
 
/*----- Section Titles -----*/ 
 
.accordion-section-title { 
 
    width:100%; 
 
    padding:15px; 
 
    display:inline-block; 
 
    border-bottom:1px solid #1a1a1a; 
 
    background:#333; 
 
    transition:all linear 0.15s; 
 
    /* Type */ 
 
    font-size:1.200em; 
 
    text-shadow:0px 1px 0px #1a1a1a; 
 
    color:#fff; 
 
} 
 
    
 
.accordion-section-title.active, .accordion-section-title:hover { 
 
    background:#4c4c4c; 
 
    /* Type */ 
 
    text-decoration:none; 
 
} 
 
    
 
.accordion-section:last-child .accordion-section-title { 
 
    border-bottom:none; 
 
} 
 
    
 
/*----- Section Content -----*/ 
 
.accordion-section-content { 
 
    padding:15px; 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="accordion"> 
 
    <div class="accordion-section"> 
 
     <a class="accordion-section-title" href="#accordion-1">Accordion Section #1</a> 
 
      
 
     <div id="accordion-1" class="accordion-section-content"> 
 
      <p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p> 
 
     </div><!--end .accordion-section-content--> 
 
    </div><!--end .accordion-section--> 
 
</div><!--end .accordion-->