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