我需要使用AMP显示更多/更少按钮。当使用amp-list（以下代码）时，AMP提供了更多的显示组件。我试图在没有更多项目要索引时将show more按钮更改为show less按钮，并将这些项目隐藏回到其原始状态（仅显示前几个项目）。我该如何实现？谢谢
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- ## Setup -->
<!-- Additionally used AMP components must be imported in the header. We use `amp-list` for showing a list of products -->
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<link rel="canonical" href="https://ampbyexample.com/advanced/show_more_button/">
<title>Load more button</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<amp-state id="productsState" src="/json/related_products.json">
</amp-state>
<!-- ... while the `amp-state` with id `product` is just used to implement the show-more logic where we are allowing the user to click 3 times. -->
<amp-state id="product">
<script type="application/json">
{
"moreItemsPageIndex": 0,
"hasMorePages": true
}
</script>
</amp-state>
<amp-list src="/json/related_products.json"
[src]="productsState.items"
width="320"
height="144"
[height]="productsState.items.length * 24"
class="m1">
<template type="amp-mustache">
<strong>Product</strong>: {{name}}
<strong>Price</strong>: ${{price}}
</template>
</amp-list>
<!-- The show more button is implemented via a form which triggers a page update on the `submit-success` event.
We are then merging the form results into the items already loaded by the `amp-state` using the `concat` function. -->
<form method="GET"
action="/json/more_related_products_page"
action-xhr="/json/more_related_products_page"
target="_top"
on="submit-success: AMP.setState({
productsState: {
items: productsState.items.concat(event.response.items)
},
product: {
moreItemsPageIndex: product.moreItemsPageIndex + 1,
hasMorePages: event.response.hasMorePages
}
});">
<input type="hidden" name="moreItemsPageIndex" value="0" [value]="product.moreItemsPageIndex">
<input type="submit"
value="Show more"
class="ampstart-btn caps m1 show"
[class] = "(product.hasMorePages == false ? 'hide' : 'ampstart-btn caps m1 mb3 show')">
</form>
</body>
</html>