Erstellen von Akkordeon Menü in SharePoint 2013

Question

Ich bin neu in SharePoint. Gemäß einer Anforderung von einem Client muss ich eine Teamseite in SharePoint entwickeln. Einige der Seiten müssen den Inhalt in einem Akkordeonmenü anzeigen, wie in der folgenden Abbildung gezeigt. Screenshot

Dies ist in der SharePoint-Hilfe von Microsoft verfügbar. Unten ist der Link für das gleiche. Ich glaube, sie würden auch SharePoint für diese Support-Site verwenden. Kann jemand seine Erfahrung mit dieser Art von Seite teilen? Ist es nur mit SharePoint-Funktionen möglich oder müssen wir eine benutzerdefinierte HTML-Seite erstellen? Einige Beispiele würden wirklich geschätzt werden. Danke im Voraus.

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

es Erstellen Sie benutzerdefinierte die Sharepoint-API als Datenquelle verwendet wird. Alles, was nicht einfach out-of-the-box ist, sollte von Grund auf neu gemacht werden. Es ist so, als würde man versuchen, einen quadratischen Pflock in ein rundes Loch zu stecken. Du schneidest an den Ecken des quadratischen Stifts weg, aber es passt nie genau in das runde Loch.

Der folgende Code befindet sich here.

Sie müssen wahrscheinlich für alle Sharepoint warten geladen werden, gibt es integrierte Funktionen, die Sie wie diese

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

Goodluck helfen!

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