Coffeescript 没有切换我的 div答案

【问题标题】：Coffeescript is not toggling my divCoffeescript 没有切换我的 div
【发布时间】：2018-03-17 16:33:56
【问题描述】：

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

我希望在单击表单链接按钮后仍显示名称文本字段。

我尝试将 toggle() 更改为 show()，同样的事情发生在我无法让 name 文本字段保持显示的情况下。

# 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()

【问题讨论】：

标签： jquery ruby-on-rails sass coffeescript

【解决方案1】：

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

例如：

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

你可以在这里试试：https://jsfiddle.net/u9hngeo4/1/

【讨论】：