使标题可单击以展开分组列表 [英] Make Title clickable to expand on grouped list

问题描述

我有一个包含超过100个项目（问题和答案）的常见问题列表。

该列表按"问题"分组。 （从默认的"标题"重命名）字段并且仅显示"答案"字段。字段。

在前端，列表将显示如下：

问题：测试问题1

问题：测试问题2

问题：测试问题3

问题：测试问题4

问题：测试问题5

问题：测试问题6
问题：测试问题7

问题：测试问题8

问题：测试问题9

问题：测试问题10

当用户点击"问题"时测试问题3的链接，它将展开项目并显示答案。 

问题：测试问题1

问题：测试问题2

问题：测试问题3

    Donec pulvinar justo eu massa tempus feugiat。 Fusce tristique diam mi，vitae molestie felis congue in.Fusce nec nulla eget nulla vehicula luctus ut at diam。 Curabitur id rhoncus sem。 

问题：测试问题4

问题 ：测试问题5

问题：测试问题6

问题：测试问题7

问题：测试问题8

问题：测试问题9

问题 ：测试问题10

是否可以制作文本"测试问题1"，"测试问题2"，"测试问题3"当用户点击"问题"时，可以用相同的方式点击。链接？如果可能的话，我打算隐藏"问题"这个词。
，因为在页面上出现100次时非常重复。请参阅以下理想解决方案：

测试问题1

测试问题2

测试问题3

    Donec pulvinar justo eu massa tempus feugiat。 Fusce tristique diam mi，vitae molestie felis congue in.Fusce nec nulla eget nulla vehicula luctus ut at diam。 Curabitur id rhoncus sem。 

测试问题4

测试问题5

测试问题6

测试问题7

测试问题8

测试问题9

测试问题10

希望你能提供帮助。非常感谢!!!

解决方案

请参阅Joe McShea的以下文章。 



https://joemcshea.intellipointsol.com/an-accordion-view-custom-list-view-display-templates-csr/ 功能; 

并从标题中删除您可以使用的问题，请执行以下代码更改。 （不好但可以使用）

 getHeader：function（ctx）{
 var result = 

< BLOCKQUOTE>（"< p />"）; //占位符，将返回内部html

//添加展开链接
result.append（

（"< a /> "，{
" class"：" expand"，
" href"：" javascript：void（0）"，
" style"：" margin -right：10px; text-decoration：underline"
}）。text（" Expand"））;

//添加折叠链接
result.append（

I have a FAQ list with over 100 items (questions and answers).

The list is grouped by the "Question" (renamed from the default "Title") field and only display the "Answer" field.

On the frontend, the list will display like below:

Question: Test question 1
Question: Test question 2
Question: Test question 3
Question: Test question 4
Question: Test question 5
Question: Test question 6
Question: Test question 7
Question: Test question 8
Question: Test question 9
Question: Test question 10

When users click the "Question" link for Test question 3, it will expand the item and the answer will display. 

Question: Test question 1
Question: Test question 2
Question: Test question 3

   Donec pulvinar justo eu massa tempus feugiat. Fusce tristique diam mi, vitae molestie felis congue in. Fusce nec nulla eget nulla vehicula luctus ut at diam. Curabitur id rhoncus sem. 

Question: Test question 4
Question: Test question 5
Question: Test question 6
Question: Test question 7
Question: Test question 8
Question: Test question 9
Question: Test question 10

Is it possible to make the text "Test question 1", "Test question 2", "Test question 3" etc. clickable the same way when user clicks the "Question" link? If possible, I am planning to hide the word "Question" as it is quite repetitive when appearing 100 times on the page. See ideal solution below:

Test question 1
Test question 2
Test question 3

   Donec pulvinar justo eu massa tempus feugiat. Fusce tristique diam mi, vitae molestie felis congue in. Fusce nec nulla eget nulla vehicula luctus ut at diam. Curabitur id rhoncus sem. 
Test question 4
Test question 5
Test question 6
Test question 7
Test question 8
Test question 9
Test question 10

Hope you are able to help. Thanks a lot!!!

解决方案

Refer below article by Joe McShea. 

https://joemcshea.intellipointsol.com/an-accordion-view-custom-list-view-display-templates-csr/  

and to remove the question from the title you can use do below changes in code. (Not good but can use)

getHeader: function(ctx) {
    var result =

("<p/>"); // placeholder, will return inner html // add the expand link result.append(

("<a/>", { "class": "expand", "href": "javascript:void(0)", "style": "margin-right: 10px; text-decoration: underline" }).text("Expand")); // add the collapse link result.append(

这篇关于使标题可单击以展开分组列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！