js 展示更多 列表显示更多 展示全部

<ul class="xypg-left-nav">
    {% for value in data %}
    <li>
        <a href="{{ value.url }}"{% if value.target != 1 %}target='{{ value.target }} '{% endif %} >{{ value.title }}</a>
        <div class="first-nav-btn"></div>
        {% if value.chil_cate is not empty %}
        <ul class="xypg-left-subnav">
            {% for cate in value.chil_cate %}
            <li><a href="{{ cate.url }}"{% if cate.target != 1 %}target='{{ cate.target }} '{% endif %}>{{ cate.title }}</a></li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
</ul>

<a href="javascript:;" class="load-more-btn">
    <div class="read-more">
        <div class="ww">展开</div>
    </div>
</a>

<script>
    $(document).ready(function() {
        // 获取导航列表和按钮
        var nav = $(".xypg-left-nav");
        var liItems = nav.find("li");
        var loadMoreBtn = $(".load-more-btn");

        // 默认显示前20个<li>
        if (liItems.length > 16) {
            liItems.slice(16).hide(); // 隐藏第20个之后的<li>
            loadMoreBtn.show();
        } else {
            loadMoreBtn.hide();
        }

        // 点击展开更多按钮
        loadMoreBtn.on("click", function() {
            // 显示所有隐藏的<li>
            liItems.show();
            // 隐藏按钮（点击后不再显示）
            $(this).hide();
        });
    });
</script>