我有一组项目，我想在无序列表中显示。首先，我只想显示其中的一些项目，然后按“显示更多”按钮后，其他项目将显示在浏览器上。
我试图将数组传递给模板并使用 Flask 的 for 循环，将 itens （但不是全部）显示到浏览器。并使用 javascript DOM 函数，显示其余的操作系统元素。 我不知道如何解决这个问题或如何找到最好的方法。
我尝试以某种方式做到这一点，但最好的方法只显示一个项目，而不是所有其他项目，无序列表的格式消失了（文本左侧的点，我真的不知道这是否是一个错误或错误）。
这是尝试之一：
Flask 应用程序：
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/', methods=["GET", "POST"])
def home():
lista = ['test-1', 'test-2', 'test-3', 'test-4', 'test-5', 'test-6', 'test-7']
return render_template('home.html', lista=lista)
if __name__ == "__main__":
app.run(debug=True)
HTML代码是：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Array Test</h1>
<ul>
{% for item in lista[:3] %}
<li>{{ item }}</li>
{% endfor %}
{% for item in lista[3:] %}
<li class="show" style="display: none;">
{{ item }}
</li>
{% endfor %}
</ul>
<button class="buttonShow">Mostrar mais</button>
<script>
const buttonShow = document.getElementsByClassName("buttonShow")[0]
const showItens = () => {
document.getElementsByClassName("show")[0].style.display = "inline";
}
buttonShow.addEventListener('click', showItens)
</script>
</body>
</html>
我找到了答案，我删除了参数：
class="show" style="display: none;"<li><div><ul>
{% for item in array[:3] %}
<li>{{ item }}</li>
{% endfor %}
<div class="show" style="display: none;">
{% for item in lista[3:] %}
<li>
{{ item }}
</li>
{% endfor %}
</div>
</ul>