Question

我为我的FAQ尝试了很多不同类型的手风琴，但是没有成功。我有一个列表FAQ，标题重命名为Question，并添加了多行文本Answer。

我有以下脚本，正在获取数据，但是手风琴不是函数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
     getListItems();
    $( "#accordion" ).accordion();
 });

 function getListItems() {
     $.ajax({
         url: _spPageContextInfo.webAbsoluteUrl +
        "/_api/web/lists/getbytitle('FAQ')/items?$select=Title,Answer",
         method: "GET",
         headers: {
         "Accept": "application/json; odata=verbose"
         },
         success: function(data) {
         $.each(data.d.results, function(index, item) {
             $("#accordion").append("<h3>" + item.Title + "</h3><div><p>" + item.Answer + "</p></div>");
         });
         var icons = {
             header: "ui-icon-circle-arrow-e",
             activeHeader: "ui-icon-circle-arrow-s"
         };
         $("#accordion").accordion();
         },
         error: function(data) {},
         async: false
     });
 }
 </script>
</head>
<body>
 <div id="accordion">
 </div>
</body>
</html>

我在哪里做错了？

Answer 1

您无法在代码中引用jQuery库。修改下面的代码以使其起作用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
jq = jQuery.noConflict(true);
jq(document).ready(function() {
    getListItems(); 
});
function getListItems() {
    jq.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('FAQ')/items?$select=Title,Answer",
        method: "GET",
        headers: {
            "Accept": "application/json; odata=verbose"
        },
        success: function(data) {
            jq.each(data.d.results, function(index, item) {
                jq("#accordion").append("<h3>" + item.Title + "</h3><div><p>" + item.Answer + "</p></div>");
            });
            var icons = {
                header: "ui-icon-circle-arrow-e",
                activeHeader: "ui-icon-circle-arrow-s"
            };
            jq("#accordion").accordion();
        },
        error: function(data) {
            console.log(data);
        }        
    });
}
</script>
</head>
<body>
<div id="accordion">
</div>
</body>
</html>

尝试创建手风琴风格的常见问题解答

1 个答案: