所以,我知道如果我能够实现额外的把手助手,我将能够解决这个问题,但这不是一个选择。
我们的帮助台[ZenDesk]使用第三方后端系统,它使用把手作为动态内容的一般标记。我在帮助中心网站的主页上有一个部分,我想列出前5-6个常见问题解答文章,然后在下面查看更多链接,以便用户查看该特定部分中的其余文章。
开箱即用,它们允许我们使用IF和IS条件,但没有比较TRUE或FALSE,不大于,不小于,不大于或等于等等。我写了一个简单的帮助,允许为此,但无论我把它放在我们可用的模板中,它总会产生一个函数无效的错误。
在与该应用程序的支持团队讨论后,我被告知不允许使用任何定制帮助。我必须单独依赖HTML,CSS和JAVASCRIPT / JQUERY来找到解决方案。
那么....有没有人知道如何通过使用CSS或JAVASCRIPT在5次迭代中封闭把手#each循环的可能解决方案?
更新:09/05/2018:
这是我用于“常见问题”部分的#each循环
<h2>Frequently Asked Questions</h2>
<section class="section faq-base">
<section class="categories">
<ul class="">
{{#each categories}}
{{#if ../has_multiple_categories}}
<li class="">
<a href='{{url}}' class="">
<h4 class="blocks-item-title">{{name}}</h4>
</a>
</li>
{{else}}
{{#each sections}}
{{#is id //ID FOR FREQUENTLY ASKED QUESTIONS SECTION}}
<div class="accordion homeFAQ" id="homeFAQ">
{{#each articles}}
<div class="card">
<div class="card-header" id="heading{{@index}}">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse{{@index}}" aria-expanded="true" aria-controls="collapse{{@index}}">
{{title}}
</button>
</h5>
</div>
<div id="collapse{{@index}}" class="collapse" aria-labelledby="heading{{@index}}" data-parent="#homeFAQ">
<div class="card-body">
{{body}}
</div>
</div>
</div>
{{/each}}
<div class="card">
<div class="card-header">
<h5 class="mb-0">
<a href="{{url}}" class="btn btn-link collapsed">...SEE MORE</a>
</h5>
</div>
</div>
</div>
{{/is}}
{{/each}}
{{/if}}
{{/each}}
</ul>
</section>
</section>
从上面的代码中可以看出,我将FAQ插入Bootstrap手风琴,最后是...SEE MORE
按钮
您可以默认在文章中添加display:none
,然后使用JS根据页面上文章的类(或其他内容)计算页面上的文章数量,然后再次使用JS从中删除display:none
前5-6篇文章?可能不是最优雅的方法,但应该是实现您所寻找的一种方式。