Jquery 切换持续时间似乎不起作用

Question

除了基础知识之外，我对前端工作几乎一无所知。 在我正在构建的网站中，我正在尝试一些非常简单的方法，但它似乎不起作用。 我有一个表单，我只想在单击按钮后显示。 我能够通过使用 jquery 来解决这个问题，但是无论出于何种原因，切换持续时间似乎都不起作用。 我所有的谷歌和阅读文档在我看来都应该有效。 无论我尝试和更改什么，它似乎都是默认的切换速度，我只尝试过 .toggle(), .toggle('slow'), .toggle("slow"), .toggle("fast"), 。切换（在此处插入任何数字）并且速度始终保持默认值：400。最初我通过将 display 设置为 none 来隐藏表单； 在 css 文件中，如果这也很重要。 我究竟做错了什么？ 任何帮助将不胜感激！

页面上的 html 的一部分

    <div class="container w-25 mb-5">
        <div class="container-fluid" id="wrapper">
            <form method="POST" id='form1'>
                {% csrf_token %}
                {% for field in form %}
                <div class="form-group px-3 my-3 {% if field.errors %}invalid{% endif %}">
                {{ field.label_tag }}
                {{ field }}
                {{ field.help_text }}
                {{ field.errors }}
                </div>
                {% endfor %}
                <button type="submit" class="btn btn-primary ml-3">Submit</button>
            </form>
        </div>
    </div>
    

</div>
{% endblock %}

{% block extra_scripts %}
<script type="text/javascript">
$( document ).ready( function() {
    $( "#review" ).click( function() {
        $( "#form1" ).toggle("slow");
    });
});
</script>
{% endblock %}

Answer 1

看看这个片段，看看它是否有帮助。 我不确定它是否是您没有尝试过的，但它确实有效。 只是为了演示目的，它被设置为无法忍受的长时间。

 $( document ).ready( function() { $( "#review" ).click( function() { $( "#form1" ).toggle(6000); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container w-25 mb-5"> <div class="container-fluid" id="wrapper"> <form method="POST" id='form1'> <div class="form-group px-3 my-3 {% if field.errors %}invalid{% endif %}"> Here is some demo info for demonstration </div> <button type="submit" class="btn btn-primary ml-3">Submit</button> </form> </div> </div> <button id='review'>Review</button>