为什么刷新页面后立即必须单击带有slideToggle的按钮两次才能使未切换的表单可见？

Question

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

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

发生的情况：刷新后，如果切换按钮是第一个单击的按钮，则该表单将切换为可见状态，然后滑动回去以使其不可见，而无需其他任何单击。

在服务器上，它们都出现在相同的请求上。

刷新后立即：

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>

分类控制器：

...
respond_to :js

  def new
    @category = current_user.categories.build
  end

  def create
    @category = current_user.categories.create(category_params)
    @category.save!
  end
...

new.js.erb：

$('#category-form').html("<%= j (render 'form') %>");
$('#category-form').slideToggle(350);
$('#category_name').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);

jQuery仍然让我有些困惑。 感谢您提供的任何帮助，以解释发生的情况以及如何解决？ 提前致谢。

Answer 1

因此，以防万一有人遇到同样的问题，我在index.html.erb文件中有一个错字。

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

本来应该：

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