Question

当我点击表单链接 href时，我可以看到我的网页在显示和隐藏之间快速切换名称文本字段。

点击表单链接按钮后，我希望名称文本字段保持显示。

我尝试将toggle（）更改为show（），同样的事情发生在我无法显示名称文本字段的位置。

# app/views/forms/form.html.erb
<%= link_to 'Form Link', '#', class: 'form-link' %>
<div class="form-group">
  <div class="col-sm-1"><%= form.label :name, class: 'control-label' %></div>
  <div class="col-sm-1"><%= form.text_field :name, class: 'form-control' %></div>
</div>

# app/assets/stylesheets/forms.scss
.form-group {
  display: none;
}

# app/assets/javascripts/forms.coffee
$(document).on 'turbolinks:click', ('.form-link'), ->
  $('.form-group').toggle()

Answer 1

如果您想在单击链接时简单地切换div的可见性，那么您应该能够简单地听取链接上的点击并阻止默认行为以确保turbolinks不会重新加载页面。这应该可以解决你所看到的问题。当您单击该链接时，您的脚本会显示该表单，但turbolink会跟随该链接（这是＃，因此它只是重新加载页面）。

例如：

$(document).on 'click', '.form-link', (e) ->
  e.preventDefault() # prevent link from being followed
  $('.form-group').toggle()

您可以在此处试用：https://jsfiddle.net/u9hngeo4/1/

Coffeescript并没有切换我的div

1 个答案: