如何用Flask和JavaScript实现「显示更多」按钮功能？

问题描述 #

我有一个项目数组，希望在无序列表（ul）中展示，初始仅显示部分项，点击「显示更多」按钮后展示剩余所有项。通过Flask将数组传递至模板，用模板循环先渲染部分项，再尝试用JavaScript控制剩余元素显示，但目前只能显示一个剩余项，且列表的项目符号（左侧圆点）消失了。

现有代码 #

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">显示更多</button>

    <script>
      const buttonShow = document.getElementsByClassName("buttonShow")[0]
      const showItens = () => {
        document.getElementsByClassName("show")[0].style.display = "inline";
      }
      buttonShow.addEventListener('click', showItens)
    </script>
</body>
</html>

问题原因 #

1. JavaScript中document.getElementsByClassName("show")[0]仅选中第一个隐藏的li元素，导致每次点击只能显示一个项。
2. 设置display: inline会改变li默认的块级元素属性，而无序列表的项目符号仅对块级li生效，因此圆点消失。

修正后的HTML模板代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表显示示例</title>
</head>
<body>
    <h1>数组测试</h1>
    <ul>
      {% for item in lista[:3] %}
        <li>{{ item }}</li>
      {% endfor %}

      {% for item in lista[3:] %}
        <li class="hidden-item" style="display: none;">
          {{ item }}
        </li>
      {% endfor %}
    </ul>
    <button class="show-more-btn">显示更多</button>

    <script>
      const showBtn = document.querySelector('.show-more-btn');
      const hiddenItems = document.querySelectorAll('.hidden-item');

      showBtn.addEventListener('click', () => {
        // 遍历所有隐藏项，设置为列表项默认显示样式
        hiddenItems.forEach(item => {
          item.style.display = 'list-item';
        });
        // 可选：点击后隐藏按钮，避免重复操作
        showBtn.style.display = 'none';
      });
    </script>
</body>
</html>

关键改进点 #

• 使用document.querySelectorAll获取所有隐藏元素，遍历设置显示状态，确保所有剩余项都能展示。
• 将显示属性设为list-item（li元素的默认显示值），保留无序列表的项目符号。
• 可选添加按钮隐藏逻辑，优化交互体验。

内容的提问来源于stack exchange，提问作者Oendel