在Rails 5中使用CoffeeScript实现元素显示/隐藏的正确方法

嘿，我来帮你搞定这个交互功能！其实实现起来很简单，根据你用的Rails版本，我给你两种常见的写法：

方案一：适合使用jQuery的Rails版本（比如Rails 6及以前） #

你可以在对应的控制器CoffeeScript文件里（比如app/assets/javascripts/your_controller.coffee，这样代码只在该控制器的页面生效），或者全局的application.coffee里添加这段代码：

# 等待DOM加载完成后执行
$ ->
  # 绑定链接的点击事件
  $('#secondary-link').on 'click', (event) ->
    # 阻止链接默认的跳转行为（因为你用了"#"当href）
    event.preventDefault()
    
    # 切换表格的显示/隐藏状态
    $('#secondary').toggle()
    
    # 额外优化：切换链接的文字，让用户更清楚当前操作
    linkText = if $('#secondary').is(':visible') then 'Hide additional details' else 'Show additional details'
    $(this).text(linkText)

代码解释： #

• $ -> 是jQuery的文档就绪函数，确保页面DOM加载完成后再绑定事件，避免找不到元素的问题
• event.preventDefault() 阻止点击链接后跳转到页面顶部的默认行为
• toggle() 方法会自动切换元素的display属性，帮你省掉手动判断显示状态的麻烦
• 最后切换链接文字的逻辑是为了提升用户体验，让用户一眼知道点击后会发生什么

方案二：适合Rails 7+（使用Turbo的原生JS写法） #

如果你的项目是Rails 7及以上，默认用Turbo而不是jQuery，那可以用原生JavaScript的CoffeeScript写法，同样放在对应的资产文件里：

# 监听Turbo的页面加载事件（因为Turbo会局部刷新页面）
document.addEventListener 'turbo:load', ->
  # 获取元素
  secondaryLink = document.getElementById('secondary-link')
  secondaryTable = document.getElementById('secondary')
  
  # 如果页面里没有这两个元素，直接退出，避免报错
  return unless secondaryLink && secondaryTable
  
  # 绑定点击事件
  secondaryLink.addEventListener 'click', (event) ->
    event.preventDefault()
    
    # 切换表格的hidden属性
    secondaryTable.hidden = !secondaryTable.hidden
    
    # 切换链接文字
    secondaryLink.textContent = if secondaryTable.hidden then 'Show additional details' else 'Hide additional details'

为什么用turbo:load？ #

因为Turbo的导航机制是局部刷新页面，传统的DOMContentLoaded只会在首次加载时触发，用turbo:load可以确保每次页面切换后事件都能正确绑定。

最后提醒一下，你已经在application.css.scss里设置了#secondary{ display: none; }，这个初始隐藏的样式是对的，上面的代码会基于这个初始状态进行切换，完美适配你的需求！

内容的提问来源于stack exchange，提问作者santhosh kumar