Question

我有一个AMP-HTML页面，用户可以扩展手风琴，但列表很长。要关闭手风琴，用户必须向上滚动到顶部标题才能关闭。我希望在列表底部添加一个关闭按钮来折叠手风琴。我无法使用Jquery或内联javascript，因为它是AMP有效的。这是我尝试过的。我知道你可以在正常的div上做到这一点，只是在手风琴中使用它时遇到了麻烦。感谢您的任何帮助，您可以提供。

<amp-accordion class="accordion">
<section id="topranked">
    <h4 class="bg-rust-light">Top places in Boise<i class="fa fa-plus"></i></h4>
    <div class="accordiondiv" id="toprankedhide">
        <p class="half-bottom center big-text"><i class="fa fa-star fa-2x color-ship-dark"></i><br>
        Based on <strong>32,000 reviews</strong> from our guests</p>
            <a class="button bg-gray-light border-gray-dark button100 big-text" href="/official.asp?ID=1">Company1</a><br><a class="button bg-gray-light border-gray-dark button100 big-text" href="/official.asp?ID=1">Company2</a><br>
<a class="button bg-gray-light border-gray-dark button100 big-text" href="/official.asp?ID=1">Company3</a>
            <button on="tap:toprankedhide.hide">Close</button>
            </div>
        </section>
    </amp-accordion>

Answer 1

我认为feature正是您所寻找的。

<amp-accordion>
  <section>
    <h4><span class="show-more">Show more</span> <span class="show-less">Show less</span></h4>
    <p>Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio, odio arcu in eu wisi. </p>
  </section>
</amp-accordion>

您可以向扩展的手风琴添加更多文字，以展示需要“显示更多”/“少显示”机制的更长，更完整的文字。

其他参考资料：

Answer 2

    <amp-accordion class="accordion" id="myAccordion" animate expand-single-section disable-session-states>
<section id="topranked" on="expand:topranked.scrollTo(duration=300, position='center')">
    <h4 class="bg-rust-light">Top places in Boise<i class="fa fa-plus"></i></h4>
    <div class="accordiondiv" id="toprankedhide">
        <p class="half-bottom center big-text"><i class="fa fa-star fa-2x color-ship-dark"></i><br>
        Based on <strong>32,000 reviews</strong> from our guests</p>
            <a class="button bg-gray-light border-gray-dark button100 big-text" href="/official.asp?ID=1">Company1</a><br><a class="button bg-gray-light border-gray-dark button100 big-text" href="/official.asp?ID=1">Company2</a><br>
<a class="button bg-gray-light border-gray-dark button100 big-text" href="/official.asp?ID=1">Company3</a>
            <button on="tap:toprankedhide.hide">Close</button>
            </div>
        </section>
    </amp-accordion>

这是我用滚动所做的。也许它会在未来帮助某人:) 部分展开后，它会将用户滚动到活动部分。

在accordiandiv内用关闭按钮折叠amp-accordion

2 个答案: