如何使用Javascript动态添加Accordion Panels和内容？ [英] How to add Accordion Panels and content dynamically using Javascript?

问题描述

Hiii，我需要帮助。我在SharePoint网站的webpart的脚本编辑器中使用JavaScript代码创建了一个手风琴。我创建了一个带有站点列的内容类型，我在自定义列表中使用它来链接到我的手风琴。



要求：

1动态创建手风琴面板，这意味着当您在列表中添加任何内容时，它必须动态显示在手风琴面板内而不更改您的代码，或者如果它是一个新标题，其中包含您在自定义列表中添加的内容，它也必须显示在手风琴里面添加一个新的手风琴面板。



这是我的代码，它增加了一个带有指定参数/标题的手风琴。

A要求是允许您的代码动态添加自定义列表中的手风琴标题和内容。

Hiii, I need a help. I have an accordion created using JavaScript code inside script editor of a webpart in SharePoint site. I have created a content type with site columns, which I used in my custom list to link to my accordion.

Requirements:
1. Create accordion panels dynamically, which means when u add anything inside your list it must appear inside the accordion panels dynamically without changing your code, or if it is a new heading with its content that you add on your custom list, it must appear too inside accordion by adding a new accordion panel.

Here's my code, it adds an accordion, with a specified parameters/ headings.
A requirement is to allow your code to also add accordion headings and content from the custom list dynamically.

<link  type="text/css" rel="stylesheet" href="/Style%20Library/XSL%20Style%20Sheets/Java5.css"/>
<script type="text/javascript"

src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script> 
 
<script type="text/javascript">
     jQuery(document).ready(function($) {
         //Add the Web part titles for the webparts that should be displayed in the accordion
        SharePointAccordian(["About Us","Mission","Contact Us"]);
    });
    
    function SharePointAccordian(webPartTitles)
    {
    
        for(index in webPartTitles)
        {
            var title = webPartTitles[index];
            
            $("#accordian").append('<h3>'+title+'</h3>');
            $("h2.ms-webpart-titleText span:contains('"+title+"')").each(function(){
                                                                
                if ($(this).text() == title){
                                var outerDiv = $('<div></div>');
                                var outerP = $('<p></p>');
                    var innerItem = $(this).closest("span").hide().closest("[id^='MSOZoneCell_WebPart']").contents();
                    outerP.append(innerItem);
                    outerDiv.append(outerP);
                                                                                $("#accordian").append(outerDiv);
                }
            });
        }
       $("#accordian").accordion({ heightStyle: "content" });
    }
 
</script>
<div id="accordian"></div>

在我的自定义列表中，我有5列：标题（单行文本），部门（查找），InfoPage类型（选择），内容信息（多行文本）和ReadMore文本（多行文本）。此列表信息必须动态插入到折叠面板中。

on my Custom list I have 5 columns: Title (Single line of text), Department (Lookup), InfoPage Type (Choice), Content-Info(Multiple lines of text) and ReadMore Text (Multiple lines of text). This list information must be inserted inside an accordion panels dynamically.

推荐答案

）{
// 添加应在手风琴中显示的Web部件的Web部件标题
SharePointAccordian（[ 关于我们， 使命， 联系我们]）;
}）;

function SharePointAccordian（webPartTitles）
{

for （index in webPartTitles）
{
var title = webPartTitles [index];

) { //Add the Web part titles for the webparts that should be displayed in the accordion SharePointAccordian(["About Us","Mission","Contact Us"]); }); function SharePointAccordian(webPartTitles) { for(index in webPartTitles) { var title = webPartTitles[index];

（ ＃accordian） .append（' < h3>' + title + ' < / h3>'）;

("#accordian").append('<h3>'+title+'</h3>');

（ h2.ms-webpart-titleText span：contains（' + title + '））。each（ function （）{

如果（

("h2.ms-webpart-titleText span:contains('"+title+"')").each(function(){ if (

这篇关于如何使用Javascript动态添加Accordion Panels和内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！