Question

我有一个名为Imagelist的Twig字段类型（来自Bolt CMS），我对其进行了修改，以在各种屏幕上每行输出4个精细分组的图像，除了超小屏幕外，每行输出1个图像。然后，我还决定实施动画，以便默认情况下仅显示第一行图像，并且您可以展开其他图像，这些图像先向后滑动然后向后折叠。我能够使它们在需要时显示和消失，但是我无法使动画正常工作。首先，我尝试仅使用CSS3进行操作，然后放弃并找到了一些JS代码，我也尝试过，但是它无法与其他代码一起正常工作。当您第一次单击“显示更多图像”时，这些额外的图像会展开，但是其中的一行会向后折叠。当您隐藏它们，然后再次单击它们时，它将正常工作，直到刷新页面以隐藏额外的图像。然后第一次又是一团糟。隐藏额外的图像时没有向后的动画，而我也需要。

我正在发布指向jsfiddle的链接，其中包含页面的html输出，整个CSS以及相应的JS代码。 Stackoveflow不允许我发布这么大的代码段。在这里，我包括了一部分Twig代码，它涉及到整个问题（所有逻辑都至关重要）。

http://jsfiddle.net/COOLak/be86d5xu/6/

{% block imagelist_field %}
<div class="imagelist columns">
    {% for image in value %}
        {% if loop.index0 is divisibleby(4) %}
            <input class="hide" id="imagelist" type="checkbox">
            <div class="section-imagelist">
        {% endif %}
        {% if value|length < 4 %}
            <div class="below4">
        {% endif %}         
        <div>
            {{ popup(image.filename, 320, 240) }}
        </div>
        {% if loop.index is divisibleby(4) or loop.last %}
            </div>
        {% endif %}
        {% if value|length < 4 %}
            </div>
        {% endif %}
        {% if value|length > 4 %}
        <label for="imagelist">
        <span class="icon">
            <i class="fas fa-angle-double-down"></i><i class="fas fa-angle-double-up"></i>
        </span>
        <div class="unfold">Show extra images</div>
        <div class="fold">Hide extra images</div>
        </label>
        {% endif %}
    {% endfor %}    
</div>
{% endblock %}

由于我不是程序员/网页设计师，而只是建立一个粉丝网站，因此很难使此工作正常进行。我花了无数的时间试图理解我的代码出了什么问题，但没有成功。抱歉，发布了这么多代码，但这不能通过问一些一般性问题来解决。我什至不知道错误在哪里：它是CSS，Twig还是JS。只是有些不对劲。我很谦虚地要求帮助我解决此问题，或者仅使用CSS提出自己的解决方案。没关系。任何帮助将不胜感激。

带有图像的向下/向上滑动部分无法正常工作

0 个答案: