Javascript 为什么在刷新页面后，我必须立即单击带有滑动切换的按钮两次，使未切换的表单可见？

在我的项目中，我有一个按钮，当点击表单时，它可以向下滑动。除了这一种情况，它的工作原理与预期完全一致

我期望的是：当表单不可见时，单击切换按钮时，表单将显示并保持可见和可访问状态，直到提交表单或重新单击第一次将其切换为可见的按钮使表单不可见为止

发生的情况：刷新后，如果切换按钮是单击的第一个按钮，则表单将切换为可见，并在没有任何其他单击的情况下滑回不可见状态

在服务器上，它们看起来都是同一个请求

刷新后立即执行以下操作：

Started GET "/users/1/categories/new" for 127.0.0.1 at 2017-01-23 12:09:33 -0500
Processing by CategoriesController#new as JS
  Parameters: {"user_id"=>"1"}
  User Load (0.6ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 1], ["LIMIT", 1]]
  Rendering categories/new.js.erb
  Rendered categories/_form.html.erb (3.6ms)
  Rendered categories/new.js.erb (9.3ms)
Completed 200 OK in 28ms (Views: 20.6ms | ActiveRecord: 0.6ms)

再次单击以使窗体在其保持可见的位置可见：

Started GET "/users/1/categories/new" for 127.0.0.1 at 2017-01-23 12:11:22 -0500
Processing by CategoriesController#new as JS
  Parameters: {"user_id"=>"1"}
  User Load (0.4ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 1], ["LIMIT", 1]]
  Rendering categories/new.js.erb
  Rendered categories/_form.html.erb (2.4ms)
  Rendered categories/new.js.erb (5.7ms)
Completed 200 OK in 18ms (Views: 13.1ms | ActiveRecord: 0.4ms)

以下是我的相关代码：

index.html.erb：

<div class="row">
    <ul id="categories-list"><%= render @categories %></ul>
    <div class="row">
        <%= link_to new_user_category_path, remote: true do %>
            <button>New Category</button>
        <% end %>
    </div>
    <div class="row">
        <div id="category-form" style="desplay:none;"></div>
    </div>

</div>

new.js.erb：

$('#category-form').html("<%= j (render 'form') %>");
$('#category-form').slideToggle(350);
$('#category_name').focus();

$（“#类别表格”）.html（“”）；
$（#类别表'）。幻灯片切换（350）；
$（'类别名称'）.focus（）；

_form.html.erb

<div id="category-form">
    <%= simple_form_for shallow_args(current_user, @category), remote: true do |f| %>
        <%= f.input :name %>
        <%= f.button :submit, "Add" %>
    <% end %>
</div>

create.js.erb：

$('#categories-list').append("<%= j (render @category) %>");
$('#category-form').slideUp(350);

$（“#类别列表”）。追加（“”）；
元("分类表格").slideUp(350),；

---

jQuery对我来说仍然有点困惑。我很感谢您能提供的任何帮助，解释发生了什么以及如何修复它？提前谢谢。

如果有人带着同样的问题来到这里，我的

index.html.erb

文件中有一个打字错误

<div id="category-form" style="desplay:none;"></div>

应该是：

<div id="category-form" style="display:none;"></div>

<div id="category-form" style="display:none;"></div>