Question

因此，如果我能够实现额外的车把帮手，我知道我将能够解决此问题，但这不是一个选择。

我们正在为服务台[ZenDesk]使用第三方后端系统，该系统使用把手作为动态内容的常规标记。我在帮助中心网站的主页上有一个部分，我想列出前5-6条FAQ文章，然后在下面提供一个SEE MORE链接，供用户查看该特定部分中的其余文章。

它们开箱即用，它们使我们可以使用IF和IS作为条件，但除TRUE或FALSE之外没有其他可比较的内容，不大于，不小于，不大于或等于等等。我写了一个简单的帮助器这将允许这样做，但是无论我将其放在可供我们使用的模板中的什么位置，它总是会生成一个错误消息，说明该功能无效。

与该应用程序的支持团队讨论此事后，我被告知不允许使用任何自定义帮助程序。我必须完全依靠HTML，CSS和JAVASCRIPT / JQUERY来找到解决方案。

所以...。有人知道我可以通过使用CSS或JAVASCRIPT在5次迭代中封闭把手#each循环的可能解决方案吗？

更新：2018年9月5日：

这是我在“常见问题”部分使用的#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按钮

Answer 1

默认情况下，您能否在文章中添加display:none，然后使用JS根据页面上文章的类（或其他内容）来计算页面上文章的数量，然后使用JS再次从前5-6篇文章中删除display:none？可能不是最优雅的方法，但应该是完成您想要的方法的一种。

在不使用额外帮手的情况下限制每个手把的结果

1 个答案: